要求：1、點擊按鈕，切換圖片；
2、圖片能夠自動輪播；
3、鼠標移入，輪播停止；移出繼續輪播；
知識點：1、定時器：setInterval()；
2、鼠標移入事件：onmouseenter/onmouseover；
鼠標移出事件：onmouseleave/onmouseout；
難點：假設輪播圖輪播到第二張圖片，此時點擊第一張圖片，我們想要的效果是鼠標移出后，圖片輪播到第二張圖片，到事實是輪播到第三張圖片。
**********************************************************************************************************
代碼：
<!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>主頁</title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
img {
vertical-align: top;
}
.wrapBox {
width: 1226px;
height: 460px;
margin: 50px auto;
position: relative;
}
.wrapBox img {
width: 100%;
}
.showBox li {
display: none;
}
.showBox .show {
display: block;
}
.dotBox {
overflow: hidden;
position: absolute;
right: 50px;
bottom: 20px;
}
.dotBox li {
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
float: left;
margin: 0 10px;
}
.dotBox .active {
background-color: #3399CC;
}
</style>
</head>
<body>
<div class="wrapBox">
<ul class="dotBox">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="showBox">
<li class="show"><img src="../img/1.jpg" alt=""></li>
<li><img src="../img/2.jpg" alt=""></li>
<li><img src="../img/3.jpg" alt=""></li>
<li><img src="../img/4.jpg" alt=""></li>
</ul>
</div>
</body>
<script>
var dotLi = document.querySelectorAll(".dotBox li");
var showLi = document.querySelectorAll(".showBox li");
var wrapBox = document.querySelector(".wrapBox");
console.log(dotLi, showLi, wrapBox);
// 1、點擊按鈕切換對應圖片
for (let i = 0; i < dotLi.length; i++) {
var li = dotLi[i];
li.onclick = function () {
//解決難點問題(當點擊時，把i即被點擊的按鈕下標，賦值給index即可)
index = i;
// 循環遍歷所有的li按鈕，並清空顏色類名
for (let j = 0; j < dotLi.length; j++) {
dotLi[j].className = "";
showLi[j].className = "";
}
// 給點擊的按鈕，添加顏色類名
dotLi[i].className = "active";
showLi[i].className = "show";
}
}
// 2、自動輪播，定時器
// 圖片下標位置，默認為0
var index = 0;
var timer = null;
// 頁面加載時，調用一次
playTime();
function playTime() {
// var timer = setInterval(function () {
// timer要改為全局變量
timer = setInterval(function () {
// 每過兩秒，下標加一，跳到下一張
index++;
// 當圖片走完最后一張，也就是下標為4的時候，跳到第一張
if (index == 4) {
index = 0;
}
for (let j = 0; j < dotLi.length; j++) {
dotLi[j].className = "";
showLi[j].className = "";
}
// 給點擊的按鈕，添加顏色類名
dotLi[index].className = "active";
showLi[index].className = "show";
}, 2000)
}
// 3、當鼠標移入wrapBox時，停止輪播，清除定時器
wrapBox.onmouseenter = function () {
clearInterval(timer);
}
// 4、當鼠標移出wrapBox時，繼續輪播，重新調用定時器
wrapBox.onmouseleave = function () {
playTime();
}
</script>
</html>
效果圖：
