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图首先以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>
发现用文字很难说清楚这件事,一不小心就啰嗦了一大堆。希望能给观者一点启发。