无缝滚动轮播图

Posted 2020-09-06

代码:

 1 $(function() {
 2     var index = 1;
 3     var index1 = 0;
 4     $(‘.right‘).click(function() {// 点击显示下一张
 5         index++;
 6         index1++;
 7         if (index1 > 4) {
 8             index1 = 0;
 9         }
10         // console.log(-100*index+‘%‘);
11         $(‘#img‘).animate({
12             left: -100 * index + ‘%‘
13         }, 100, function() {
14             if (index === 6) {
15                 index = 1;
16                 $(this).css(‘left‘, ‘-100%‘);
17             }
18         });
19         $(‘ol li‘).eq(index1).addClass(‘bg‘).siblings().removeClass(‘bg‘);
20     });
21 
22     $(‘.left‘).click(function() {//点击显示上一张；
23         index--;
24         index1--;
25         if (index1 < 0) {
26             index1 = 4;
27         }
28         console.log(-100 * index + ‘%‘);
29         $(‘#img‘).animate({
30             left: -100 * index + ‘%‘
31         }, 100, function() {
32             if (index === 0) {
33                 index = 5;
34                 $(this).css(‘left‘, ‘-500%‘);
35             }
36         });
37         $(‘ol li‘).eq(index1).addClass(‘bg‘).siblings().removeClass(‘bg‘);
38     });
39     $(‘ol li‘).click(function() {// 下面的按钮
40         $(this).addClass(‘bg‘).siblings().removeClass("bg");
41         index1 = $(this).index();
42         index = index1 + 1;
43         $(‘#img‘).animate({
44             left: -100 * index + ‘%‘
45         }, 100);
46     });
47     setInterval(run, 5000);
48 
49     function run() {//自动显示下一张
50         index++;
51         index1++;
52         if (index1 > 4) {
53             index1 = 0;
54         }
55         // console.log(-100*index+‘%‘);
56         $(‘#img‘).animate({
57             left: -100 * index + ‘%‘
58         }, 100, function() {
59             if (index === 6) {
60                 index = 1;
61                 $(this).css(‘left‘, ‘-100%‘);
62             }
63         });
64         $(‘ol li‘).eq(index1).addClass(‘bg‘).siblings().removeClass(‘bg‘);
65     }
66 });