使用jQuery实现有移动效果的无缝轮播图

使用jQuery的动画效果实现无缝轮播图

第一次写博客，刚学jQuery做了个小Demo，写的不好的地方和有待提高的地方请大家提出来，接下来我们进入正题

设计思路

使用ul列表对图片进行排序，对li元素设置CSS浮动样式，设置ul的宽度等于所有图片的总长度，使图片水平排列，然后我们可以通过在js中设置定时器setInterval() 来使图片每隔固定时间自动朝一个方向移动。其中使用jQ的 animate()动画方法，使其出现换页动画效果。实现无缝的思路就是在序列最后再放一张第1张的图片，在每次第5张切换到第6张的时候有个动画效果，然后立马切换到第1张，从而实现无缝连播。当然，用单纯用JS也能实现。

• HTML代码部分

   <div id="show">  	  //图片显示的窗口				
   	<ul id="show_Ulimg">      //排列的列表
   		<li><img src="img/01.png" alt="" /></li>
   		<li><img src="img/02.jpg" alt="" /></li>
   		<li><img src="img/03.jpg" alt="" /></li>
   		<li><img src="img/04.jpg" alt="" /></li>
   		<li><img src="img/05.png" alt="" /></li>
   		<li><img src="img/01.png" alt="" /></li>    //在最后面插入第一张图片
   	</ul>
   	<ul id="show_Ulbtn">    //轮播图下方的页码显示圆圈按钮
   		<li></li>
   		<li></li>
   		<li></li>
   		<li></li>
   		<li></li>
   	</ul>
   	<span id="l_btn">&lt</span>    //左右按钮
   	<span id="r_btn">&gt</span>	
   </div>
  

span标签可以换成button标签，我这里只是演示。

• CSS部分代码

   	<style>
   	*{
   		margin: 0;
   		padding: 0;
   	}
   	#show{
   		height: 300px;
   		width: 500px;
   		margin: 150px auto;
   		position: relative;
   		overflow: hidden;
   	}
   	#show #show_Ulimg{
   		list-style: none;
   		width: 3000px;
   		position: absolute;
   	}
   	#show #show_Ulimg li{
   		float: left;
   	}
   	#show #show_Ulimg li img{
   		height: 300px;
   		width: 500px;
   	}
   	#show #show_Ulbtn{
   		position: absolute;
   		background: rgba(0,0,0,.6);
   		bottom: 0;
   		left: 50%;
   		height: 22px;
   		width: 120px;
   		margin-left: -60px;
   		border-radius: 10px 10px 10px 10px;
   		margin-bottom: 10px;
   	}
   	#show #show_Ulbtn li{
   		float: left;
   		list-style: none;
   		height: 10px;
   		width: 10px;
   		border-radius: 50%;
   		border: 2px solid white;
   		margin: 4px 5px;
   		cursor: pointer;
   	}
   	#show #show_Ulbtn li:first-child{
   		background: white;
   	}
   	#show span{
   		position: absolute;
   		display: inline-block;
   		height: 50px;
   		width: 20px;
   		background: rgba(0,0,0,.6) ;
   		color: white;
   		text-align: center;
   		line-height: 50px;
   		top:50%;
   		margin-top: -25px;
   		cursor: pointer;
   		z-index: -1;
   	}
   	#show #l_btn{
   		left: 0;
   		border-radius: 0 15px 15px 0;
   	}
   	#show #r_btn{
   		right: 0;
   		border-radius: 15px 0 0 15px;
   	}
   </style>
  

CSS的代码就不做解释了，主要是做的稍微美观一点

• JavaScript部分代码

		<script>
			var i = 0;
//			轮播方法
			function times(){
				i++;        //i可以当作图片的页码 0是第一张
				if(i==5){
					$("#show_Ulbtn li").eq(0).css("background","white")
						.siblings().css("background","transparent");
				}
				if(i==6){
					$("#show_Ulimg").stop().css("left",0);
//					第6张切换成第一张再从第二张开始移
					i=1;
					$("#show_Ulimg").animate({left:-500},400);
				}
				$("#show_Ulimg").animate({left:-500*i},400);
//				下方点按钮 ，使用siblings()方法排他
				$("#show_Ulbtn li").eq(i).css("background","white")
					.siblings().css("background","transparent");
			}
			
			var timer = setInterval("times()",2000); //开启定时器
//		移入暂停
			$("#show").hover(function(){
				clearInterval(timer); //清除定时器
				$("#l_btn").css("z-index","1"); //移入图片左右按钮显示
				$("#r_btn").css("z-index","1");
			},function(){
				clearInterval(timer);
				timer = setInterval("times()",2000);
				$("#l_btn").css("z-index","-1");  //移出按钮消失
				$("#r_btn").css("z-index","-1");
			});
			
//		左按钮
			$("#l_btn").click(function(){
				i--;
				if(i==-1){
					$("#show_Ulimg").stop().css("left",-2500);  
					//在第一张图按左按键判断，将图片立马移动到第6张
					i=4;                                //再将i设为4
					$("#show_Ulimg").animate({left:-500*i},400);   
					//使第1张开始左移动到第5张
				}
				if(i==0){			//从后面调到第一张图判断
					$("#show_Ulimg").animate({left:0},400);
					$("#show_Ulbtn li").eq(0).css("background","white")
						.siblings().css("background","transparent");
					i=5;
//					瞬间移动到第6张
//					$("#show_Ulimg").stop().css("left",-2500);
					//阵列动画逐一运行，所以这里用css方法不行
					$("#show_Ulimg").animate({left:-500*i},0);
				}
				$("#show_Ulimg").animate({left:-500*i},400);
				$("#show_Ulbtn li").eq(i).css("background","white")
					.siblings().css("background","transparent");
			});
//		右按钮      判断方式与左按钮一样，不过相反
			$("#r_btn").click(function(){
				i++;
				if(i==5){
					$("#show_Ulbtn li").eq(0).css("background","white")
						.siblings().css("background","transparent");
				}
				if(i==6){
					$("#show_Ulimg").stop().css("left",0);
					i=1;
					$("#show_Ulimg").animate({left:-500*i},400);
				}
				$("#show_Ulimg").animate({left:-500*i},400);
				$("#show_Ulbtn li").eq(i).css("background","white")
					.siblings().css("background","transparent");
			});
		
//		下方圆点按钮
			$("#show_Ulbtn li").click(function(){
				i = $(this).index();   //使i=  li的索引值，使点击圆点切换至相应的图片
				$("#show_Ulimg").animate({left:-500*i},400);
				//排他，在点击的这个圆圈的同时将其他的圆圈变回原来的样子
				$(this).css("background","white")
					.siblings().css("background","transparent");
			});
			
		</script>

在整个js中，i就相当于图片的页码，对i进行操作就可以对图片进行切换，下方的移动点就自动跟着i走