【实践】纯jquery实现图片滑动无缝轮播，带左右按钮及控制按钮
在此随笔之前，博主已经做过一次图片滑动轮播，如过你也有看过就会知道里面的效果在自动轮播的时候有一个不太美观的效果，就是当最后一张图片滑动切换到第一张图片的时候会看到一个快速向左滑动的效果，这是很不美观的，当然也有网站是这样做。但博主参照过很多网站的图片轮播基本上都是无缝的（一张紧接着一张），所以博主也决定自己做一个。
做这个之前博主还在某客学院看了视频教程，此方法为纯jquery方法，比js混合jq方法易懂简洁所以有必要给大家分享一下
先上html代码以及css代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="jquery.js" type="text/javascript"></script> <script src="ongradeanimationCtrl.js" type="text/javascript"></script> <style type="text/css"> *{ padding:0px; margin:0px; border:0px; } li{ list-style-type:none; } a{ text-decoration:none; } #wrapper{ margin:0px auto; border:0px; padding:0px; } #show-area{ width:800px; height:450px; position:relative; margin:0px auto; overflow:hidden; } #show-area ul{ position:relative; width:4800px; height:450px; right:0; } #show-area ul li{ float:left; width:800px; } #controler{ width:120px; text-align:center; position:absolute; top:425px; left:370px; z-index:1; } #controler div{ height:15px; width:15px; border-radius:100%; background-color:#ccc; float:left; margin-left:5%; opacity:0.9;/*透明度50%*/ filter:Alpha(opacity=90);/*为了适应旧的浏览器*/ } #button-left{ /*display:none;*/ color:#fff; position: absolute; top: 189px; left: 0px; width: 60px; height: 60px; z-index:2; background:url(images/left.jpg); border-radius:100%; background-size:cover; opacity:0.5;/*透明度50%*/ filter:Alpha(opacity=50);/*为了适应旧的浏览器*/ } #button-right{ /*display:none;*/ color:#fff; position: absolute; top: 189px; left: 740px; width: 60px; height: 60px; z-index:2; background:url(images/right.jpg); border-radius:100%; background-size:cover; opacity:0.5;/*透明度50%*/ filter:Alpha(opacity=50);/*为了适应旧的浏览器*/ } .onclick{ background-color:#FFF !important; } </style> </head> <body> <div id="wrapper"> <div id="show-area"> <ul> <li><a href="#"><img src="images/p1.jpg"></a></li> <li><a href="#"><img src="images/p2.jpg"></a></li> <li><a href="#"><img src="images/p3.jpg"></a></li> <li><a href="#"><img src="images/p4.jpg"></a></li> </ul> <div id="button-left" title="下一张"></div> <div id="button-right" title="上一张"></div> <div id="controler"></div><!--控制按钮,为了日后方便后台操作这里的控制按钮在js代码中控制添加--> </div> </div> </body> </html>
jquery代码
$(function(){ var i = 0; var imgWidth = $("#show-area ul li").width(); var clone = $("#show-area ul li").first().clone(); $("#show-area ul").append(clone); //复制第一张图片并且添加到最后达到无缝连接的效果 var size = $("#show-area ul li").size();//得到所有li的个数 /*第一步*/ //一开始循环添加按钮 for(var j = 0 ; j<size - 1 ; j++){ $("#controler").append("<div></div>"); }
//为什么要size - 1？因为最后一张图片只是作一个过渡效果我们显示的始终还是4张图片
//所以添加按钮的时候我们也应该添加4个按钮 $("#controler div").eq(0).addClass("onclick"); /*第二步*/ //左按钮 $("#button-left").click(function(){ Toleft(); }) //右按钮 $("#button-right").click(function(){ Toright(); }) /*第3步*/ //按钮移出移入事件 $("#controler div").hover(function(){ i = $(this).index(); clearInterval(timer); $("#show-area ul").stop().animate({left:-i * imgWidth}); $(this).addClass("onclick").siblings().removeClass("onclick"); $("#index").html("index的值：" + index); },function(){ timer = setInterval(function(){ Toleft(); },3000) }) //ul鼠标移出移入事件 $("#show-area ul").hover(function(){ clearInterval(timer); },function(){ timer = setInterval(function(){ Toleft(); },3000) }) //两个方向按钮鼠标移出移入事件 $("#button-left,#button-right").mouseover(function(){ clearInterval(timer); }).mouseout(function(){ timer = setInterval(function(){ Toleft(); },3000) }) //定时器 var timer = setInterval(function(){ Toleft(); },3000) /*第2.1步*/ //左按钮实现的函数 function Toleft(){ i++; if(i==size){ //当当前图片为最后一张图片的时候（我们一开始复制并且添加到ul最后面的图片）并且再点击了一次左按钮，这时候我们就利用css的快速转换效果把ul移动第一张图片的位置并且第二张图片滑入达到无缝效果（css的变换效果很快我们肉眼是很难看见的） $("#show-area ul").css({left:0}); i = 1; } $("#show-area ul").stop().animate({left:-i*imgWidth},1000); if(i == size -1){ $("#controler div").eq(0).addClass("onclick").siblings().removeClass("onclick"); }else{ $("#controler div").eq(i).addClass("onclick").siblings().removeClass("onclick"); } } /*第2.2步*/ //右按钮实现的函数 function Toright(){ //同理，如果当前图片位置是第一张图片我再按一下右按钮那么我们也利用css的快速变换使它的位置来到最后一张图片的位置（size-1），并且让倒数第二张图片滑动进来 i--; if(i==-1){ $("#show-area ul").css({left:-(size - 1)*imgWidth}); i=size-2; } $("#show-area ul").animate({left:-i*imgWidth},1000); $("#controler div").eq(i).addClass("onclick").siblings().removeClass("onclick"); } });
