純CSS3實現圖片無間斷輪播效果

2024-07-11 08:25:46

字體：大中小

來源：轉載

供稿：網友

前言：圖片輪播效果現在在各大網站都是非常普遍的，以前我們都是通過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:

XML/HTML Code復制內容到剪貼板

<!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 | 科博網-鐘科的個人博客</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>