前言
回顧實作輪播圖時，發現淘寶、小米和京東等首頁使用的輪播圖翻頁均是用CSS3 tranlate3D實作的，與之前使用絕對定位，更改left值或絕對定位，更改index值達到翻頁效果不同，于是嘗試了一下，
提示：以下是本篇文章正文內容，下面案例可供參考
一、效果圖
二、HTML結構
代碼如下（示例用4個輪播圖片）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/banner.css">
<title>Document</title>
</head>
<body>
<div class="banner">
<a href="#" class="btn btn-l"><</a>
<a href="#" class="btn btn-r">></a>
<ul>
<li><a href="#"><img src="img/focus.jpg" alt=""></a></li>
<li><a href="#"><img src="img/focus1.jpg" alt=""></a></li>
<li><a href="#"><img src="img/focus2.jpg" alt=""></a></li>
<li><a href="#"><img src="img/focus3.jpg" alt=""></a></li>
</ul>
<ol>
</ol>
</div>
<script src="js/banner.js"></script>
</body>
</html>
三、主要原理
1. 單圖顯示原理
盒子寬高固定，只夠放一張圖，超出部分隱藏overflow:hidden，
有人可能會說，盒子寬高=圖片寬高，可是如何一行顯示4張圖片呢？設定ul的寬度為100%*圖片數量，并且設定li標簽浮動即可，
1.1 主要代碼
.banner {
position: relative;
width: 500px;
height: 300px;
z-index: 1;
overflow: hidden;
}
.banner ul {
width: 500%;
height: 100%;
transition: all .3s;
}
.banner ul li{
float: left;
}
2. 圖片翻頁原理
2.1 移動
設定translateX（當然可以用translate3D），每點擊一次向左或向右翻頁按鈕，實作一次水平移動，移動距離為圖片寬度，
2.2 過渡
設定過渡時間transition，達到過渡效果，
2.3 最后一張圖片“右翻頁”
① 先將第一張圖片復制到輪播圖末尾
② 最后一張右翻頁正常翻頁到新的最后一頁
③ 以過渡時間為0秒翻頁到第一頁
④從第一頁正常翻頁到第二頁
提示：第一張向左翻頁同理，
3. 下方小圓圈按鈕翻頁原理
計算目標translateX值，公式：-（目標位置*圖片寬度），加過渡時間移動即可，
/**
* 輪播圖移動
* @method imgMove
* @param {number} index 目標位置
* @param {number} moveTime 過渡時間
*/
function imgMove(moveTime) {
var distance = -index * bannerWidth; //計算translateX移動距離
banner_ul.style = 'transform:translateX(' + distance + 'px);' + 'transition:all ' + moveTime + 's'; //開始移動
// 排它思想
for (var i = 0; i < banner_ol.children.length; i++) {
banner_ol.children[i].className = '';
}
// 更改樣式
if (index <= banner_ol.children.length - 1) {
banner_ol.children[index].className = 'current'
} else {
banner_ol.children[0].className = 'current'
}
}
4. 自動播放原理
使用setInterval函式，每time秒翻頁即可（如向右翻頁按鈕click事件），
// 自動播放-定時器
setInterval(function () {
time++;
if (time == 3) {
// 點擊向右按鈕
btn_r.click();
time = 0;
}
}, 1000)
注意事項
- 圖片移動可只使用同一個函式imgMove，同一個當前位置變數index，當發生向左右翻頁或小圓圈按鈕翻多頁，設定index增量即可，
- 小圓圈按鈕應與實際圖片數量保持相同的數量，
- 為小圓圈按鈕增添點擊事件可以使用事件委托，
// 為小圓圈按鈕增加點擊事件（事件委托）
// 為小圓圈按鈕增加點擊事件（事件委托）
banner_ol.addEventListener('click', function (e) {
// 防止點擊事件點到ol其他空白區域
if (e.target.tagName == 'LI') {
time = 0;
// 排它思想
for (var i = 0; i < banner_ol.children.length; i++) {
banner_ol.children[i].className = '';
}
// 更改樣式
e.target.className = 'current'
// 獲取當前小圓圈按鈕data-index
var btnIndex = e.target.dataset.index;
index = btnIndex;
imgMove(0.3)
}
})
總結
以上就是今天的主要內容，本文僅僅簡單介紹了基本原理，具體實作還有很多細節要注意，如樣式的選擇、定位、布局和排他思想的使用等等，作者水平有限，如有錯誤煩請批評指正，完整代碼：點擊下載
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/293984.html
標籤：其他