官網輪播：
我的輪播：
重難點：
1、布局
2、圖片和右下角小圓點的同步問題
3、setInterval定時器的使用
4、淡入淡出動畫效果
5、左右箭頭點擊時，圖片和小圓點的效果同步
6、另一種輪播思維
解答：
1、最底下容器使用相對定位，圖片、小圓點、箭頭均使用絕對定位懸浮在底部容器上，圖片均的top和left值均設置為0，即全部重疊在一個位置，但是只顯示一張圖片，即只有一張圖片的display為block，其他圖片隱藏，即display：none
2、通過全局index索引記錄點擊的是第幾個小圓點，默認為0，找到相對應的第index張圖片，將這張圖片顯示，其他圖片隱藏
3、通過修改index使得圖片和右下角小圓點同步
setInterval(function () {//定時器，達到自動輪播的效果
index++;//循環++
if (index > 4) {//當循環到最后一個就再從第一個開始
index = 0;
}
setZero();//設置小圓點
setPicture();//設置圖片
}, 3000);
4、通過js修改元素的animation值，否則動畫只會在初始化時顯示一次
5、點擊左箭頭是index--，若index < 0 則賦值為4；擊右箭頭是index++，若index > 4 則賦值為0，達到循環的效果
6、設置最底部容器為固定大小，圖片使用列表一行展示，列表的容器使用相對定位並設置為溢出隱藏（overflow：hidden）,列表使用絕對定位，將列表的位置向左移或向右移實現輪播的效果
源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米輪播圖</title>
<style>
body {
margin: 0;
}
#banner {
width: 1226px;
height: 460px;
background: aqua;
margin: 20px auto;
/*面板使用相對定位，方便在其上面使用絕對定位添加元素*/
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#banner ul li img {
width: 1226px;
height: 460px;
}
#banner .item {
position: absolute;
top: 0;
display: none;
opacity: 0;
animation-timing-function: ease-in-out;
}
/*初始加載時，顯示第一張圖片*/
#banner .item:first-child {
display:block;
opacity: 1;
}
.arrow #leftArrow, .arrow #rightArrow {
width: 40px;
height: 69px;
position: absolute;
top: 195px;
}
.arrow #leftArrow {
left: 100px;
background-image: url("../images/xiaomi/icon-slides.png");
background-position: -83px 0;
background-repeat: no-repeat;
}
.arrow #rightArrow {
right: 100px;
background-image: url("../images/xiaomi/icon-slides.png");
background-position: -126px 0;
background-repeat: no-repeat;
}
/*右下角小圓點切換*/
.zeroPoint {
position: absolute;
bottom: 20px;
right: 40px;
}
.zeroPoint li {
width: 5px;
height: 5px;
border: 2px solid #555;
background: #555;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.zeroPoint li:hover {
background: #fff;
}
.zeroPoint li.hover {
background: #fff;
}
/*定義圖片切換動畫樣式*/
/*淡出*/
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/*淡入*/
@keyframes fadeIn{
from{
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeIn{
from{
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<!--整個容器-->
<div id="banner">
<!--圖片容器-->
<div class="img-wrap">
<ul>
<li class="item"><img src="../images/xiaomi/1.jpg" alt=""></li>
<li class="item"><img src="../images/xiaomi/2.jpg" alt=""></li>
<li class="item"><img src="../images/xiaomi/3.jpg" alt=""></li>
<li class="item"><img src="../images/xiaomi/4.jpg" alt=""></li>
<li class="item"><img src="../images/xiaomi/5.jpg" alt=""></li>
</ul>
</div>
<!--左右箭頭容器-->
<div class="arrow">
<div id="leftArrow"></div>
<div id="rightArrow"></div>
</div>
<!--右下角小圓點-->
<ul class="zeroPoint">
<li class="hover"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script>
<!--這個index是圖片和小圓點進行同步的關鍵-->
var index = 0;
//獲取小圓點的父元素ul
var zeroPoint = document.querySelector(".zeroPoint");
//獲取所有圖片
var imgLis = document.querySelectorAll(".img-wrap li");
//獲取所有的小圓點
let lis = zeroPoint.querySelectorAll("li");
//小圓點點擊事件監聽
zeroPoint.addEventListener("click", function (event) {
let target = event.target;
for (let [n, li] of lis.entries()) {
if (li === target) {//更改被點擊的小圓點的樣式，背景色為白色，這里通過添加hover類的方式實現
index = n;
target.className = "hover";
} else {//否則恢復為小圓點的默認樣式，這里通過去除hover類的方式來實現
li.className = li.className.replace("hover", "");
}
}
setPicture();//設置圖片
});
//左箭頭點擊事件
var leftArrow = document.querySelector("#leftArrow");
leftArrow.addEventListener("click", function (event) {
index--;//點擊左箭頭時，index--
if (index < 0) {//若index < 0 則賦值為4，達到循環的效果
index = 4;
}
setZero();//設置小圓點
setPicture();//設置圖片
});
//右箭頭點擊事件
var rightArrow = document.querySelector("#rightArrow");
rightArrow.addEventListener("click", function (event) {
index++;
if (index > 4) {
index = 0;
}
setZero();
setPicture();
});
function setPicture() {
//遍歷所有圖片
for (let i = 0, length = imgLis.length; i < length; i++) {
if (i === index) {//如果這個圖片是第index個孩子，則讓它顯示，並設置淡入的動畫效果
imgLis[i].style.display = "block";
imgLis[i].style.animation = "fadeIn 3s";
} else {//否則，隱藏，並設置淡出動畫
imgLis[i].style.animation = "fadeout 0s";
imgLis[i].style.display = "none"
}
}
}
function setZero() {
for (let [n, li] of lis.entries()) {
if (n === index) {//如果是第index個小圓點，則修改這個小圓點的背景顏色為白色
li.className = "hover";
} else {//其他小圓點恢復默認樣式
li.className = li.className.replace("hover", "");
}
}
}
setInterval(function () {//定時器，達到自動輪播的效果
index++;//循環++
if (index > 4) {//當循環到最后一個就再從第一個開始
index = 0;
}
setZero();//設置小圓點
setPicture();//設置圖片
}, 3000);
</script>