纯CSS3实现图片无间断轮播效果

Javascript:

1. $(function(){   
2.         var index = 1,          //默认的当前索引为1，因为clone了最有一个dom在第一个前面做衔接   
3.             moveWidth = 360;    //每次需要移动的像素值   
4.         //左移动   
5.         $('#btnLeft').on('click',function(){   
6.             //每次+1   
7.             index++;   
8.             //通过索引乘以移动像素值，那么就得到了移动的步位   
9.             $('.wrap-list').css({ transform:'translate3d(-'+ (index * moveWidth) +'px,0,0);transition-duration: 0.3s;' });   
10.             //这里的判断是衔接的关键所在，如果当前索引已经是最后一个dom了,也就是我们clone好的这个dom了，那就说明已经需要开始重新开始新的一轮了   
11.             if(index == $('.wrap-list img').size() - 1){   
12.                 //css3的动画有一个300毫秒的执行时间,所以我们这里也需要等待300毫秒后再进行重置操作   
13.                 setTimeout(function () {   
14.                     //重置索引为1,相当于重头开始   
15.                     index = 1;   
16.                     //重置wrap盒子为默认的其实位置开始，这里的css3的效果被去除了，所以看不出来有移动的效果，我们注意看transition-duration:0s;   
17.                     $('.wrap-list').css({transform: 'translate3d(-' + (index * moveWidth) + 'px,0,0);transition-duration: 0s;'})   
18.                 }, 300);   
19.             }   
20.         });   
21.         //右移动   
22.         $('#btnRight').on('click',function(){   
23.             //每次减一   
24.             index--;   
25.             //通过索引乘以移动像素值，那么就得到了移动的步位   
26.             $('.wrap-list').css({ transform:'translate3d(-'+ (index * moveWidth) +'px,0,0);transition-duration: 0.3s;' });   
27.             //这里的判断是衔接的关键所在,跟向右移是一个意思，等于0的时候就是到了clone的dom了，也就需要重新开始新的一轮了   
28.             if(index === 0) {   
29.                 //css3的动画有一个300毫秒的执行时间,所以我们这里也需要等待300毫秒后再进行重置操作   
30.                 setTimeout(function () {   
31.                     //这里就需要设置到除去两个clone的dom之外的最后一个dom索引来   
32.                     index = $('.wrap-list img').size() - 2;   
33.                     //重置wrap盒子为默认的其实位置开始，这里的css3的效果被去除了，所以看不出来有移动的效果，我们注意看transition-duration:0s;   
34.                     $('.wrap-list').css({transform: 'translate3d(-' + (index * moveWidth) + 'px,0,0);transition-duration: 0s;'})   
35.                 }, 300);   
36.             }   
37.         });   
38.     });  

以上所述是小编给大家介绍的纯CSS3实现图片无间断轮播效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！