利用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     });