用Jq实现图片轮播

发布于2017-02-14 / 618次浏览

研究了半天，熬夜写出来了！困死了，写完这就睡觉！ 有空在来写分析~

Jq代码：

$(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)};
 });

css代码：

*{
	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;
}

html代码：

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

取消回复

▼

^_^

暂无评论