輪播圖一般包含兩部分，即需要輪播的圖片，和底部的指示器，那麼首先，自然是h5+css佈局：
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Banner</title>
</head>
<body>
<div class="div_banner">
<ul id="ul_banner" class="ul_banner">
<li><a href="#"><img src="img/b1.png" alt=""></a></li>
<li><a href="#"><img src="img/b2.png" alt=""></a></li>
<li><a href="#"><img src="img/b3.png" alt=""></a></li>
<li><a href="#"><img src="img/b4.png" alt=""></a></li>
</ul>
<ul id="ul_indicator" class="ul_indicator">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
css:
body, div, ul, li, img {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
ul {
list-style: none;
}
body {
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;
}
.div_banner {
width: 100%;
position: relative;
overflow: hidden;
}
.ul_banner {
width: 400%;
position: relative;
}
.ul_banner li {
width: 25%;
float: left;
}
.ul_banner li img {
width: 100%;
display: block;
}
.ul_indicator {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.ul_indicator li {
width: 6px;
height: 6px;
border-radius: 50%;
margin-left: 10px;
background-color: #000;
float: left;
}
.ul_indicator li:first-child {
margin-left: 0;
background-color: #fff;
}
對輪播圖的佈局以及特性需要注意幾點：
-
1.浮動（不必多說）
-
2.ul寬度要爲所有圖片的總寬度，如4張圖片就是400%；
-
3.overflow: hidden;溢出隱藏；
-
4.li的寬度爲100/圖片個數，如4張圖片時li寬度就是25%，這個25%是ul總寬度即400%的25%，實際就是100%屏幕寬度；
-
5.img的display屬性要設置爲block，有兩個好處，可以去掉圖片底部白邊和高度可以自適應；
-
6.爲了實現圖片輪播無縫切換效果，需要將首尾各添加一張原尾首圖片（要考慮手勢滑動），然後監聽輪播到第二張或倒數第二張圖片時，重置圖片位置以達到無限輪播效果；
佈局效果：
接下來便是用js實現自動輪播，上面是在書寫佈局及樣式時使用了固定的圖片，而實際大部分是需要從服務器動態獲取的，因此我們先在js中模擬動態獲取banner圖片：
function getBanner() {
var img_urls = ["img/b1.png", "img/b2.png", "img/b3.png", "img/b4.png"];
var ul_banner = document.getElementById("ul_banner");
var imgLiHtml = "";
for (var i = 0; i < img_urls.length; i++) {
imgLiHtml += "<li> <a href=''><img src='" + img_urls[i] + "' alt=''></a></li>";
}
ul_banner.innerHTML = imgLiHtml;
}
然後再寫實現自動輪播的方法：
function bannerCarousel() {
// 第一步：獲取banner li img列表，將列表第一張圖片複製添加到最後一位，最後一張圖片複製添加到第一位；
//以本例4張圖片爲例，將第4張圖片複製一份放到第一位，將第1張圖片放置到最後一位，最後得到6張圖片，
// 這樣每次輪播到position=0或者5時，將其位置重置爲4或1，以實現無限滾動輪播
var ul_banner = document.getElementById("ul_banner");
var banner_li = ul_banner.getElementsByTagName("li");
var li_img_first = banner_li[0];
var li_img_last = banner_li[banner_li.length - 1];
ul_banner.appendChild(li_img_first.cloneNode(true));//將第一張圖片複製一份添加到最後一位
ul_banner.insertBefore(li_img_last.cloneNode(true), ul_banner.firstChild);//將最後一張圖片複製一份添加到第一位
ul_banner.style.width = banner_li.length * 100 + "%";//寬度爲6張圖片寬度
for (let i = 0; i < banner_li.length; i++) {
banner_li[i].style.width = 100 / banner_li.length + "%";
}
ul_banner.style.left = "-100%";//因首位添加圖片後，需要將整體定位到第2張圖片（實際爲banner第一張）
//第二步：添加指示器
var ul_indicator = document.getElementById("ul_indicator");
var indicatorHtml = "";
for (let i = 0; i < banner_li.length - 2; i++) {//要按原來的圖片數量
indicatorHtml += "<li></li>"
}
ul_indicator.innerHTML = indicatorHtml;
//第三步：獲取指示器列表
var indicator_li = ul_indicator.getElementsByTagName("li");
//第四步：開啓定時器
var page_index = 1;//初始位置爲1
setInterval(function () {
page_index++;
ul_banner.style.transition = "left 0.5s";
ul_banner.style.left = -page_index * 100 + "%";
changeIndicator();
setTimeout(function () {//0.5s過渡效果結束後執行
if (page_index == banner_li.length - 1) {//當輪播到最後一張時，重置爲第二張（實際爲輪播圖第一張）
page_index = 1;
ul_banner.style.transition = "none";
ul_banner.style.left = -page_index * 100 + "%";
}
}, 500)
}, 2000);
//指示器改變
var changeIndicator = function () {
for (var i = 0; i < indicator_li.length; i++) {//先全部重置爲未選中狀態
indicator_li[i].style.backgroundColor = "#ccc";
}
if (page_index === banner_li.length - 1) {//最後一張
indicator_li[0].style.backgroundColor = "#fff";
} else {
indicator_li[page_index - 1].style.backgroundColor = "#fff";
}
}
}
js輪播代碼仍然需要注意幾點：
- 1.圖片輪播位置記錄，以動態計算偏移量以及指示器顯示；
- 2.輪播過渡動畫的添加與清除；
- 3.判斷輪播位置，以適時重置圖片位置，實現無限輪播；
以上便初步實現了輪播圖自動輪播效果，但需要注意的是，上面的實現並未考慮（支持）手勢滑動，以及圖片數量問題（如僅有一張圖片時，是不需要顯示指示器的），最終完整的代碼，將在下一篇實現！
下一篇：js原生實現輪播圖（二）