1 if(leftMargin ==-1250){ 2 time=0; 3 leftMargin = -250; 4 $("#move").animate({left:leftMargin + "px"},time); 5 leftMargin=-500; 6 time=1000; 7 $("#move").animate({left:leftMargin + "px"},time); 8 }
1.第一種做法：假如說有三張圖片分別是a、b、c，我就再放三張圖片還是之前的圖片a、b、c,這樣就有六張圖了。然后定義一個ul標簽，這個ul的寬度等於這六張圖片的寬度，在css樣式中我們讓上述的ul標簽的左邊距為負的一個圖片的寬度，
代碼如下：
<!DOCTYPE html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .container{ 12 width: 250px; 13 height: 164px; 14 position: relative; 15 background-color: pink; 16 margin: 0 auto; 17 margin-top: 100px; 18 overflow: hidden; 19 20 } 21 ul{ 22 width: 1500px; 23 height: 164px; 24 list-style: none; 25 display: block; 26 position: absolute; 27 left: -250px; 28 /*margin-top: -17px;*/ 29 30 } 31 ul li{ 32 float: left; 33 } 34 a{ 35 width: 28px; 36 height: 62px; 37 display: block; 38 background-color: rgba(0,0,0,0.5); 39 position: absolute; 40 right: 0; 41 top: 30%; 42 font-size: 24px; 43 color: ghostwhite; 44 text-decoration: none; 45 line-height: 62px; 46 text-align: center; 47 z-index: 100; 48 } 49 </style> 50 <script src = "jquery-1.11.1.min.js"></script> 51 <script> 52 $(document).ready(function(){ 53 var leftMargin = -250; 54 $("#btn").click(function(){ 55 leftMargin -= 250; 56 var time = 1000; 57 if(leftMargin ==-1250){ 58
time=0;
leftMargin = -250;
$("#move").animate({left:leftMargin + "px"},time);
61 leftMargin=-500; 62 time=1000; 63 $("#move").animate({left:leftMargin + "px"},time); 64 } 65 else{ 66 $("#move").animate({left:leftMargin + "px"},time); 67 } 68 }); 69 }); 70 </script> 71 </head> 72 <body> 73 <div class = "container"> 74 <a href="#" id = "btn">></a> 75 <ul id = "move"> 76 77 <li><img src = "img/34.jpg"/></li> 78 <li><img src = "img/41.jpg"/></li> 79 <li><img src = "img/42.jpg"/></li> 80 81 <li><img src = "img/34.jpg"/></li> 82 <li><img src = "img/41.jpg"/></li> 83 <li><img src = "img/42.jpg"/></li> 84 </ul> 85 </div> 86 </body> 87 </html>
按照代碼來看，我們運行后（在第一次點擊向左滑動的按鈕前）一開始看到的是
"img/41.jpg"這張圖，然后每點擊一下ul就向左移一張圖片的寬度，當我們點擊兩次后看到第三張圖時即"img/34.jpg"，此時我們再點擊向左滑動的按鈕的話，我們就讓ul再往左移一張圖片的寬度，這樣我們即將看到的圖是ul標簽當中的第五張圖，其實也是之前看到的第一張圖
"img/41.jpg"。為了做出正常的無限滑動效果，所以在js中去實現：當你再次點擊向左滑動的按鈕的話，我便以零秒鍾的時間回到ul中第二張圖的位置，也即是我們看到的第一張圖，也就是此時ul的左邊距為-250px，然后緊接着就讓它已正常的滑動時間，滑動到ul標簽中的第三張圖的位置（也即是我們看到的第二張圖）。
1 if(leftMargin ==-1250){ 2 time=0; 3 leftMargin = -250; 4 $("#move").animate({left:leftMargin + "px"},time); 5 leftMargin=-500; 6 time=1000; 7 $("#move").animate({left:leftMargin + "px"},time); 8 }
這個是最關鍵的環節做得判斷和處理。整體的邏輯思路就是：假設有三張圖(a, b, c)我們要實現無限滑動，那我們就這樣排 a, b, c, a, b, c.
首先我們讓程序一運行后看到的是第一個b,然后每點擊一次就滑動一張，當點擊兩次后滑動到第二個a圖上時，再在這個a圖上點擊向右滑動的時候我們還是以1000毫秒(這個代碼中正常滑動的時間)的時間滑動到第二個b圖，再以0秒鍾的時間滑動到ul標簽中的第一個b圖位置，再在這個b圖以正常時間滑動到c圖，如果在這個c圖上點擊向右滑動的按鈕的話，就按正常時間滑動到第二個a圖，如果繼續在這個a圖上點擊這個滑動按鈕的話，輪播圖就會正常的滑動到第二個b圖，如果在這個b圖上還要點擊這個向右滑的按鈕的話，我們就又以0秒鍾的時間滑動到ul中的第一個b圖，然后緊接着讓它以正常的時間滑動到ul標簽中第一個c圖。這樣就達到了輪播圖正常的循環滑動的效果。
如果要簡化代碼的話，我們可以把圖片變少一點而且達到同樣的效果，如果有a, b, c三張圖片，我們可以這樣放在ul標簽中：c, a, b, c, a.就是第一張放用戶能看到的最后一張，最后一張就放用戶能看到的第一張。它的原理和上述一樣，簡而言之就是：（依然是點擊右邊的滑動按鈕）當點擊ul標簽中的第二個c圖上的按鈕時，我們以正常的時間（1000毫秒）滑動到ul標簽中的第二個a標簽，然后當用戶再在這個a圖上點擊按鈕的話，我們就以0秒鍾的時間滑動到ul標簽中的第一個a圖，然后緊接着就讓它又以正常的時間滑動到b圖。 這樣就達到了一開始從a圖正常的滑動到b圖，從b圖正常的滑動到c圖，再從c圖正常的滑動到ul標簽中的第二個a圖，再從a圖首先以0秒鍾的時間滑動到ul標簽中的第一個a圖，然后以正常的時間（1000毫秒）滑動到第一個c圖。（帶下划線的這句是點擊第二個a圖上的按鈕要完成的動作）。
再來看一下整體的滑動效果的js代碼實現：
1 <script src = "jquery-1.11.1.min.js"></script> 2 <script> 3 $(document).ready(function(){ 4 var leftMargin = -250; 5 $("#btn").click(function(){ 6 leftMargin -= 250; 7 var time = 1000; 8 if(leftMargin ==-1250){ 9 time=0; 10 leftMargin = -250; 11 $("#move").animate({left:leftMargin + "px"},time); 12 leftMargin=-500; 13 time=1000; 14 $("#move").animate({left:leftMargin + "px"},time); 15 } 16 else{ 17 $("#move").animate({left:leftMargin + "px"},time); 18 } 19 }); 20 }); 21 </script>
發現用文字很難說清楚這件事，一不小心就啰嗦了一大堆。希望能給觀者一點啟發。