00:00/
发布于2017-02-14 / 564次浏览
研究了半天,熬夜写出来了!困死了,写完这就睡觉! 有空在来写分析~
$(document).ready(function(){
var flag=0;
var show=setInterval(function(){
flag++;
$(".pic").animate({left:"-"+(flag)*400+"px"},500);
if(flag>2)
flag=-1;
},3000);
$("#prev").hover(function(){
clearInterval(show);
},function (){
autoshow();
});
$("#next").hover(function(){
clearInterval(show);
},function (){
autoshow();
});
$("#prev").click(function(){
if((flag-1)<0)
flag=4;
$(".pic").animate({left:"-"+(--flag)*400+"px"},500);
});
$("#next").click(function(){
if((flag+1)>3)
flag=-1;
$(".pic").animate({left:"-"+(++flag)*400+"px"},500);
});
$(".num li").hover(function(){
var _num=$(this).find("span").text();
clearInterval(show);
$(".pic").animate({left:"-"+(--_num)*400+"px"},500);
},function(){
autoshow();
});
function autoshow(){
show=setInterval(function(){
flag++;
$(".pic").animate({left:"-"+(flag)*400+"px"},500);
if(flag>2)
flag=-1;
},3000)};
});
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.pic img{
height: 200px;
width: 400px;
z-index: 1;
}
.pic{
height: 200px;
width: 1600px;
position: relative;
}
span{
display: none;
}
.num {
position: relative;
top:-80px;
left: 140px;
}
.num li{
padding-left: 5px;
padding-right: 5px;
margin-right: 5px;
float: left;
cursor: pointer;
}
.num li:hover{
transform: scale(1.5);
}
li{
float: left;
}
.img{
overflow: hidden;
width: 400px;
height: 200px;
}
.banner{
height: 200px;
width: 400px;
overflow: hidden;
position: relative;
margin: 30px auto;
}
#prev{
z-index: 10;
position: relative;
top:-120px;
}
#next{
z-index: 10;
position: relative;
top:-120px;
left:330px;
}
<div class="wrap">
<div class="banner">
<ul class="pic">
<li><img src="images/demo1.jpg"></li>
<li><img src="images/demo2.jpg"></li>
<li><img src="images/demo3.jpg"></li>
<li><img src="images/demo4.jpg"></li>
</ul>
<img id="prev" src="images/prev.png">
<img id="next" src="images/next.png">
<ul class="num">
<li><img src="images/circle.png"><span>1</span></li>
<li><img src="images/circle.png"><span>2</span></li>
<li><img src="images/circle.png"><span>3</span></li>
<li><img src="images/circle.png"><span>4</span></li>
</ul>
</div>
</div>
暂无评论