純CSS3實現(xiàn)圖片無間斷輪播效果

發(fā)布時間：2016-08-25 11:30:33 作者：佚名

圖片輪播效果在各大網(wǎng)站都能用到，本文給大家分享通過純css3制作輪播效果圖的思路，感興趣的朋友一起看看吧

前言：圖片輪播效果現(xiàn)在在各大網(wǎng)站都是非常普遍的，以前我們都是通過postion的left or right來控制dom的移動，這里我要說的是利用css3來制作輪播！相比以前通過postion來移動dom來說，css3的實現(xiàn)方式更為優(yōu)雅！

我相信使用過css3的童鞋們應(yīng)該都知道我們是用css哪個大哥屬性了吧！嗯，對的，就是translate3d我在前幾天還特地寫過一篇文章來介紹它，不熟悉的童鞋可以點(diǎn)擊關(guān)鍵字鏈接過去看看！知道的童鞋們，那我們繼續(xù)往下看！

效果圖如下所示：

首先，我們先說下思路

非無限循環(huán): 直接設(shè)置每次移動的位移數(shù)值，然后根據(jù)時間段執(zhí)行，比如索引從0-10，直接判斷是否到0了，最后是否到10了，然后到了0或者10的時候直接將索引設(shè)置我相反的索引數(shù)就可以了。

無限循環(huán): 無限循環(huán)的就需要考慮前后的銜接了，比如第一張圖跟最后一張圖，在執(zhí)行的最后一張圖的時候應(yīng)該會出現(xiàn)第一張圖，那么相反之下出現(xiàn)第一張圖然后往右翻的時候就應(yīng)該出現(xiàn)最后一張圖。那么這是這么做到的呢？其實很簡單，那就是clone克隆最后一個dom到第一個dom的前面，然后clone第一個dom到最后一個dom的后面，可能我這么說，大家聽起來有點(diǎn)暈。那么我們直接看看下面的代碼就知道原理了！

HTML:

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<title>輪播DEMO | 科博網(wǎng)-鐘科的個人博客</title>
<style>
*{ padding:0; margin:0; border:0; }
.wrap{ position: relative; height: 500px; width:360px; overflow:hidden; border:1px solid #ccc; margin:10px auto; }
.wrap-list{ width:9999px; transform:translate3d(-360px,0,0); transition-delay: .3s; transition:ease; }
.wrap-list img{ float:left; width:360px; height: 500px; }
.btns{ text-align:center; }
.btns button{ width:100px; height: 30px; }
</style>
</head>
<body>
<div class="wrap">
<div class="wrap-list">
<img src="http://img.mrco.cn/PKUgbaXooTzIz4TZQl7heAGF.jpg">
<img src="http://img.mrco.cn/VQeqlUbGMLcGqpy-QnDjzyZn.jpg">
<img src="http://img.mrco.cn/E32rcqdZn0uMt9JbXr0w0K95.jpg">
<img src="http://img.mrco.cn/uWHhrhupbMphjzsYtS7IRSD_.jpg">
<img src="http://img.mrco.cn/k2wZVNRo0YNU7i-wuC_-84Du.jpg">
<img src="http://img.mrco.cn/PKUgbaXooTzIz4TZQl7heAGF.jpg">
<img src="http://img.mrco.cn/VQeqlUbGMLcGqpy-QnDjzyZn.jpg">
</div>
</div>
<div class="btns">
<button id="btnLeft">左</button>
<button id="btnRight">右</button>
</div>
<script src="http://s.mrco.cn/scripts/libs/zepto/zepto.min.js?0.0.1"></script>
<script src="http://s.mrco.cn/scripts/libs/zepto/selector.js?0.0.1"></script>
<script src="http://s.mrco.cn/scripts//libs/zepto/touch.js?0.0.1"></script>
</body>
</html>

JavaScript:

JavaScript Code復(fù)制內(nèi)容到剪貼板

$(function(){
var index = 1, //默認(rèn)的當(dāng)前索引為1，因為clone了最有一個dom在第一個前面做銜接
moveWidth = 360; //每次需要移動的像素值
//左移動
$('#btnLeft').on('click',function(){
//每次+1
index++;
//通過索引乘以移動像素值，那么就得到了移動的步位
$('.wrap-list').css({ transform:'translate3d(-'+ (index * moveWidth) +'px,0,0);transition-duration: 0.3s;' });
//這里的判斷是銜接的關(guān)鍵所在，如果當(dāng)前索引已經(jīng)是最后一個dom了,也就是我們clone好的這個dom了，那就說明已經(jīng)需要開始重新開始新的一輪了
if(index == $('.wrap-list img').size() - 1){
//css3的動畫有一個300毫秒的執(zhí)行時間,所以我們這里也需要等待300毫秒后再進(jìn)行重置操作
setTimeout(function () {
//重置索引為1,相當(dāng)于重頭開始
index = 1;
//重置wrap盒子為默認(rèn)的其實位置開始，這里的css3的效果被去除了，所以看不出來有移動的效果，我們注意看transition-duration:0s;
$('.wrap-list').css({transform: 'translate3d(-' + (index * moveWidth) + 'px,0,0);transition-duration: 0s;'})
}, 300);
}
});
//右移動
$('#btnRight').on('click',function(){
//每次減一
index--;
//通過索引乘以移動像素值，那么就得到了移動的步位
$('.wrap-list').css({ transform:'translate3d(-'+ (index * moveWidth) +'px,0,0);transition-duration: 0.3s;' });
//這里的判斷是銜接的關(guān)鍵所在,跟向右移是一個意思，等于0的時候就是到了clone的dom了，也就需要重新開始新的一輪了
if(index === 0) {
//css3的動畫有一個300毫秒的執(zhí)行時間,所以我們這里也需要等待300毫秒后再進(jìn)行重置操作
setTimeout(function () {
//這里就需要設(shè)置到除去兩個clone的dom之外的最后一個dom索引來
index = $('.wrap-list img').size() - 2;
//重置wrap盒子為默認(rèn)的其實位置開始，這里的css3的效果被去除了，所以看不出來有移動的效果，我們注意看transition-duration:0s;
$('.wrap-list').css({transform: 'translate3d(-' + (index * moveWidth) + 'px,0,0);transition-duration: 0s;'})
}, 300);
}
});
});