轮播图的无限循环滑动
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>
发现用文字很难说清楚这件事，一不小心就啰嗦了一大堆。希望能给观者一点启发。
