<!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>
