前言：圖片輪播效果現在在各大網站都是非常普遍的，以前我們都是通過postion的left or right來控制dom的移動，這里我要說的是利用css3來制作輪播！相比以前通過postion來移動dom來說，css3的實現方式更為優雅！
我相信使用過css3的童鞋們應該都知道我們是用css哪個大哥屬性了吧！嗯，對的，就是translate3d我在前幾天還特地寫過一篇文章來介紹它，不熟悉的童鞋可以點擊關鍵字鏈接過去看看！知道的童鞋們，那我們繼續往下看！
首先，我們先說下思路
非無限循環: 直接設置每次移動的位移數值，然后根據時間段執行，比如索引從0-10，直接判斷是否到0了，最后是否到10了，然后到了0或者10的時候直接將索引設置我相反的索引數就可以了。
無限循環: 無限循環的就需要考慮前后的銜接了，比如第一張圖跟最后一張圖，在執行的最后一張圖的時候應該會出現第一張圖，那么相反之下出現第一張圖然后往右翻的時候就應該出現最后一張圖。那么這是這么做到的呢？其實很簡單，那就是clone克隆最后一個dom到第一個dom的前面，然后clone第一個dom到最后一個dom的后面，可能我這么說，大家聽起來有點暈。那么我們直接看看下面的代碼就知道原理了！
HTML:
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:
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 });
是不是很簡單，其實我們只要知道了原理，我們就可以去封裝一個輪播插件，大家還可以加上自動滾動等監聽事件。
好了，實現思路就分享到這里！如果大家有更好的建議或者想法歡迎給我留言！
原文地址：http://www.mrco.cn/article/57bd449fcf6935bd6dd1c0ae.html