JS實現自動輪播效果：
練習：1、左右點擊 2、添加圓點的邏輯 3、自動輪播 4、鼠標移入移除
1、左右點擊：左右點擊--關於最后一張和第一張 執行切換的時候 加了一個第六張（第一張圖片）
2、添加圓點的邏輯：圓點：1、圓點跟着左右點擊 圓點切換背景 2、點擊圓點，執行圖片切換
3、自動輪播：
4、鼠標移入移除
重點：整個輪播 最關鍵的點bs的一個變化 1.左右點擊--對bs進行++ -- 2、在執行圖片的向左移動時，用到bs 3、圓點的切換
整個自動輪播案例：<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#kuang{
width: 600px;
height: 400px;
border: 1px solid red;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#img{
width: 3627px;
height: 400px;
border: 1px solid blue;
position: absolute;
left: 0px;
transition: 1s;
}
#img img{
width: 600px;
height: 400px;
}
#left_j{
width: 30px;
height: 30px;
position: absolute;
top: 185px;
left: 0px;
}
#left_j>img{
width: 100%;
height: 100%;
}
#right_j{
width: 30px;
height: 30px;
position: absolute;
top: 185px;
right: 0px;
}
#right_j>img{
width: 100%;
height: 100%;
}
#yuandian{
width: 300px;
height: 30px;
/* border: 1px solid red; */
position: absolute;
bottom: 10px;
left: 150px;
}
.yd{
width:30px ;
height: 30px;
background-color: green;
border-radius: 15px;
float: left;
margin-left: 25px;
}
</style>
</head>
<body>
<div id="kuang" onmouseenter="yiru()" onmouseleave="yichu()"> （onmouseenter:只對父元素作用（重點記憶） ；onmouseover:對父元素和子元素都起作用 冒泡 ；onmouseleave:只對父元素作用 （重點記憶）；onmouseout:對父元素和子元素都起作用）
<!-- 圖片-->
<div id="img">
<img src="1.jpeg" >
<img src="2.jpeg" >
<img src="3.jpeg" >
<img src="4.jpeg" >
<img src="5.jpeg" >
<img src="1.jpeg" > <!-- 這張是用來做過渡效果的 -->
</div>
<!-- 箭頭 -->
<div id="left_j"><img src="zuo.jpg" ></div>
<div id="right_j" ><img src="you.jpg" ></div>
<!-- 小圓點 -->
<div id="yuandian">
<div class="yd" onclick="yd_qh(0)"></div>
<div class="yd" onclick="yd_qh(1)"></div>
<div class="yd" onclick="yd_qh(2)"></div>
<div class="yd" onclick="yd_qh(3)"></div>
<div class="yd" onclick="yd_qh(4)"></div>
</div>
</div>
</body>
<script type="text/javascript">
//箭頭的點擊事件
var left_j = document.querySelector("#left_j")
var righ_j = document.querySelector("#right_j")
var imglist = document.querySelector("#img")
var bs = 0; //加個變量用來記錄點擊的次數
//2/獲取小圓點
var yd = document.querySelectorAll(".yd")
yd[0].style.backgroundColor = "blue"
//右點擊
righ_j.onclick = function(){
bs++;
imglist.style.left = (bs * -600)+"px"
// 添加圓點的標識開始
for(var i = 0;i < yd.length;i++){
if(i == bs){
yd[i].style.backgroundColor = "#0000FF"
}else if(bs == 5){
yd[0].style.backgroundColor = "#0000FF"
yd[i].style.backgroundColor = "green"
}else{
yd[i].style.backgroundColor = "green"
}
}
// 添加圓標識結束
if(bs == 5){
setTimeout(function(){
bs = 0
imglist.style.transition = "0s"
imglist.style.left = "0px"
},1000) //因為上面的imglist的過度效果是1s 所以設置定時器1s才執行這些
}
imglist.style.transition = "1s" //因為定時器清楚了過度 所以得再次添加上
}
// 添加圓點的標識開始
//重點是用bs與循環的進行對比
for(var i = 0;i < yd.length;i++){
if(i == bs){
yd[i].style.backgroundColor = "#0000FF"
}else if(bs == -1){
yd[0].style.backgroundColor = "green"
yd[4].style.backgroundColor = "#0000FF"
}else{
yd[i].style.backgroundColor = "green"
}
}
// 添加圓標識結束
if(bs == -1){
imglist.style.transition = "0s"
imglist.style.left = (5 * -600)+"px" //切換到第六張假圖
setTimeout(function(){ //程序執行太快，我們給他加一個延時
bs = 4
imglist.style.transition = "1s"
imglist.style.left = (bs * -600)+"px"
},0)
}else{
imglist.style.left = (bs * -600)+"px"
}
}
//點擊圓點 進行切換
function yd_qh(aa){
bs = aa
imglist.style.left = (bs * -600)+"px"
imglist.style.transition = "1s"
for(var i = 0; i < yd.length;i++){
yd[i].style.backgroundColor = "green"
}
yd[bs].style.backgroundColor = "blue"
//自動輪播
var timer = setInterval(function(){
zidong()
},2000)
}
//設置移入移出事件
function yiru(){
window.clearInterval(timer) //清除定時器
}
function yichu(){
window.clearInterval(timer) // 再重新執行定時器時，習慣先清除一下
timer = setInterval(function(){
zidong()
//把右點擊的功能復制一份即可
function zidong(){
bs++;
imglist.style.left = (bs * -600)+"px"
},2000)
}
// 添加圓點的標識開始
for(var i = 0;i < yd.length;i++){
if(i == bs){
yd[i].style.backgroundColor = "#0000FF"
}else if(bs == 5){
yd[0].style.backgroundColor = "#0000FF"
yd[i].style.backgroundColor = "green"
}else{
yd[i].style.backgroundColor = "green"
}
}
// 添加圓標識結束
if(bs == 5){
setTimeout(function(){
bs = 0
imglist.style.transition = "0s"
imglist.style.left = "0px"
},1000) //因為上面的imglist的過度效果是1s 所以設置定時器1s才執行這些
}
imglist.style.transition = "1s" //因為定時器清楚了過度 所以得再次添加上
}
</script>