自己根据老师思路用Jquery写的，加了点响应式和面向对象写法的练习
来源：-
慕桂英0402682
2018-08-11 00:07
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
body{
padding: 50px 0;
background-color: #ccc;
font-size: 14px;
font-family: 'Avenir Next';
color: #555;
-webkit-font-smoothing: antialiased; /*字体抗锯齿*/
}
/*响应式*/
.slider .main .main-i,
.slider .main,
.slider{
width: 100%;
/*width: 1000px;*/
/*height: 500px;*/
position: relative;
}
.slider .main{
background-color: #f5f5f5;
}
/*幻灯片*/
.slider .main{
/*overflow: hidden;*/
}
.slider .main .main-i{
position: absolute;
top: 0;
right: 50%;
}
.slider .main .main-i img{
display: block;
width: 100%;
}
.slider .main .main-i .caption{
position: absolute;
right: 50%;
top: 30%;
margin-right: 13%;
}
.slider .main .main-i .caption h2{
/*font-size: 40px;
line-height: 50px;*/
font-size: 15px;
line-height: 15px;
color: #b5b5b5;
text-align: right;
margin-right: 20%;
}
.slider .main .main-i .caption h3{
/*font-size: 70px;
line-height: 70px;*/
font-size: 19px;
line-height: 25px;
color: #000;
text-align: right;
font-family: 'Open Sans Condensed';
margin-right: -15%;
}
/*控制按钮*/
.slider .ctrl{
position: absolute;
left: 0;
bottom: 4%;
width: 100%;
height: 2.5%;
font-size: 0;
line-height: 13px;
text-align: center;
}
.slider .ctrl .ctrl-i{
position: relative;
display: inline-block;
width: 10%;
height: 100%;
cursor: pointer;
margin-left: 1px;
background-color: #666;
box-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.slider .ctrl .ctrl-i img{
width: 100%;
position: absolute;
left: 0;
bottom: 50px;
opacity: 0;
transition: all .3s;
}
/*hover 样式*/
.slider .ctrl .ctrl-i:hover{
background-color: #f0f0f0;
}
.slider .ctrl .ctrl-i:hover img{
bottom: 13px;
-webkit-box-reflect:below 0 -webkit-gradient(
linear,
left top,
left bottom,
from( transparent),
color-stop( 50%, transparent ),
to( rgba(255,255,255,.3) )
);
opacity: 1;
}
/*active状态*/
.slider .ctrl .ctrl-i_active:hover,
.slider .ctrl .ctrl-i_active{
background-color: #000;
}
.slider .ctrl .ctrl-i_active:hover img{
opacity: 0;
}
.slider .main .main-i{
opacity: 0;
transition: all .5s;
}
.slider .main .main-i_active{
opacity: 1;
right: 0;
}
.slider .main .main-i .caption h2,
.slider .main .main-i .caption h3{
transition: all .8s .8s;
opacity: 0;
}
.slider .main .main-i_active .caption h2,
.slider .main .main-i_active .caption h3{
margin-right: 0;
opacity: 1;
}
@media (min-width: 600px){
.slider .main .main-i .caption h2{
font-size: 25px;
line-height: 35px;
}
.slider .main .main-i .caption h3{
font-size: 40px;
line-height: 35px;
}
}
@media (min-width: 900px){
.slider .main .main-i .caption h2{
font-size: 30px;
line-height: 45px;
}
.slider .main .main-i .caption h3{
font-size: 53px;
line-height: 50px;
}
}
@media (min-width: 1200px){
.slider .main .main-i .caption h2{
font-size: 40px;
line-height: 50px;
}
.slider .main .main-i .caption h3{
font-size: 70px;
line-height: 70px;
}
}
</style>
</head>
<body>
<div class="slider">
<div class="main">
<!-- <div class="main-i">
<img src="./imgs/1.jpg" alt="">
<div class="caption">
<h2>h2 caption</h2>
<h3>h3 caption</h3>
</div>
</div> -->
</div>
<div class="ctrl">
<!-- <a class="ctrl-i ctrl-i_active" href="">
<img src="./imgs/1.jpg" alt="">
</a>
<a class="ctrl-i" href="">
<img src="./imgs/2.jpg" alt="">
</a> -->
</div>
</div>
<script>
var data = [
{img:1,h2:'Creative',h3:'DUET'},
{img:2,h2:'Friendly',h3:'DEVIL'},
{img:3,h2:'Tranquilent',h3:'COMPATRIOT'},
{img:4,h2:'Insecure',h3:'HUSSLER'},
{img:5,h2:'Loving',h3:'REBEL'},
{img:6,h2:'Passionate',h3:'SEEKER'},
{img:7,h2:'Crazy',h3:'FRIEND'}
]
var Slider = (function(){
function _Slider(data,$node){
this.data = data;
this.$ct = $node;
this.init();
this.bind();
this.autoPlay();
}
_Slider.prototype.init = function(){
var $main = this.$main = this.$ct.find('.main')
var $ctrl = this.$ctrl = this.$ct.find('.ctrl')
this.clock;
this.index = 0;
this.layout(this.data);
}
// 构建DOM
_Slider.prototype.layout = function(data){
var _this = this;
$.each(data,function(idx,val){
var main_i = '';
main_i = '<div class="main-i"><img src="./imgs/' + val.img + '.jpg" alt=""><div class="caption"><h2>' + val.h2 + '</h2><h3>' + val.h3 + '</h3></div></div>';
_this.$main.append($(main_i));
var ctrl_i = '';
ctrl_i = '<a class="ctrl-i" ><img src="./imgs/' + val.img + '.jpg" alt=""></a>';
_this.$ctrl.append($(ctrl_i));
})
var $main_i = this.$main_i = this.$main.find('.main-i')
var $img = this.$img = $main_i.find('img')
var $ctrl_i = this.$ctrl_i = this.$ctrl.find('.ctrl-i')
$img.load(function(){
var imgCount = _this.imgCount = _this.$img.length;
_this.$main.height(_this.$img.height())
})
}
// 切换开关
_Slider.prototype.switch = function(n){
this.$main_i.eq(n).addClass('main-i_active').siblings().removeClass('main-i_active');
this.$ctrl_i.eq(n).addClass('ctrl-i_active').siblings().removeClass('ctrl-i_active');
this.index = n;
}
_Slider.prototype.bind = function(){
var _this = this;
this.$ctrl_i.click(function(){
var n = $(this).index();
_this.switch(n)
});
this.switch(0);
this.$ct.hover(function(){
_this.stopAuto();
},function(){
_this.autoPlay();
});
$(window).resize(function(){
_this.$main.height(_this.$img.height());
})
}
_Slider.prototype.autoPlay = function(){
var _this = this;
clearInterval(this.clock);
this.clock = setInterval(function(){
_this.switch((_this.index+1)%_this.imgCount);
},3000)
}
_Slider.prototype.stopAuto = function(){
clearInterval(this.clock);
}
return{
init:function(data,$node){
new _Slider(data,$node);
}
}
})();
Slider.init(data,$('.slider'));
</script>
</body>
</html>
写回答
关注
0回答
还没有人回答问题，可以看看其他问题
JS+CSS3实现带预览图幻灯片效果
同样的幻灯片，不一样的切换，学会实现思路，操作很简单
53759 学习 · 265 问题
相似问题