在此隨筆之前，博主已經做過一次圖片滑動輪播，如過你也有看過就會知道里面的效果在自動輪播的時候有一個不太美觀的效果，就是當最后一張圖片滑動切換到第一張圖片的時候會看到一個快速向左滑動的效果，這是很不美觀的，當然也有網站是這樣做。但博主參照過很多網站的圖片輪播基本上都是無縫的（一張緊接着一張），所以博主也決定自己做一個。
做這個之前博主還在某客學院看了視頻教程，此方法為純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"); } });