利用CSS3实现图片无间断轮播图的实现思路

时间 2019-11-08

标签利用 css3 css 实现图片无间断思路栏目 CSS 繁體版

原文原文链接

前言：图片轮播效果如今在各大网站都是很是广泛的，之前咱们都是经过postion的left or right来控制dom的移动，这里我要说的是利用css3来制做轮播！相比之前经过postion来移动dom来讲，css3的实现方式更为优雅！css

我相信使用过css3的童鞋们应该都知道咱们是用css哪一个大哥属性了吧！嗯，对的，就是translate3d我在前几天还特意写过一篇文章来介绍它，不熟悉的童鞋能够点击关键字连接过去看看！知道的童鞋们，那咱们继续往下看！html

首先，咱们先说下思路css3

非无限循环: 直接设置每次移动的位移数值，而后根据时间段执行，好比索引从0-10，直接判断是否到0了，最后是否到10了，而后到了0或者10的时候直接将索引设置我相反的索引数就能够了。web

无限循环: 无限循环的就须要考虑先后的衔接了，好比第一张图跟最后一张图，在执行的最后一张图的时候应该会出现第一张图，那么相反之下出现第一张图而后往右翻的时候就应该出现最后一张图。那么这是这么作到的呢？其实很简单，那就是clone克隆最后一个dom到第一个dom的前面，而后clone第一个dom到最后一个dom的后面，可能我这么说，你们听起来有点晕。那么咱们直接看看下面的代码就知道原理了！app

HTML:dom

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui">
 7     <meta content="yes" name="apple-mobile-web-app-capable" />
 8     <meta content="black" name="apple-mobile-web-app-status-bar-style" />
 9     <meta content="telephone=no" name="format-detection" />
10 
11     <title>轮播DEMO | 科博网-钟科的我的博客</title>
12     <style>
13         *{ padding:0; margin:0; border:0; }
14         .wrap{ position: relative; height: 500px; width:360px; overflow:hidden; border:1px solid #ccc; margin:10px auto;  }
15         .wrap-list{ width:9999px; transform:translate3d(-360px,0,0); transition-delay: .3s; transition:ease; }
16         .wrap-list img{ float:left; width:360px; height: 500px; }
17         .btns{ text-align:center; }
18         .btns button{ width:100px; height: 30px; }
19     </style>
20 </head>
21 <body>
22 <div class="wrap">
23     <div class="wrap-list">
24         <!--这里须要clone-->
25         <img src="http://img.mrco.cn/PKUgbaXooTzIz4TZQl7heAGF.jpg">
26 
27         <img src="http://img.mrco.cn/VQeqlUbGMLcGqpy-QnDjzyZn.jpg">
28         <img src="http://img.mrco.cn/E32rcqdZn0uMt9JbXr0w0K95.jpg">
29         <img src="http://img.mrco.cn/uWHhrhupbMphjzsYtS7IRSD_.jpg">
30         <img src="http://img.mrco.cn/k2wZVNRo0YNU7i-wuC_-84Du.jpg">
31         <img src="http://img.mrco.cn/PKUgbaXooTzIz4TZQl7heAGF.jpg">
32 
33         <!--这里须要clone-->
34         <img src="http://img.mrco.cn/VQeqlUbGMLcGqpy-QnDjzyZn.jpg">
35     </div>
36 </div>
37 
38 <div class="btns">
39     <button id="btnLeft">左</button>
40     <button id="btnRight">右</button>
41 </div>
42 
43 <script src="http://s.mrco.cn/scripts/libs/zepto/zepto.min.js?0.0.1"></script>
44 <script src="http://s.mrco.cn/scripts/libs/zepto/selector.js?0.0.1"></script>
45 <script src="http://s.mrco.cn/scripts//libs/zepto/touch.js?0.0.1"></script>
46 
47 </body>
48 </html>

JavaScript:ide

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

点击这里查看DEMO演示post

是否是很简单，其实咱们只要知道了原理，咱们就能够去封装一个轮播插件，你们还能够加上自动滚动等监听事件。动画

好了，实现思路就分享到这里！若是你们有更好的建议或者想法欢迎给我留言！网站

原文地址：http://www.mrco.cn/article/57bd449fcf6935bd6dd1c0ae.html