JS实现自动轮播效果：

练习：1、左右点击 2、添加圆点的逻辑 3、自动轮播 4、鼠标移入移除

1、左右点击：左右点击--关于最后一张和第一张执行切换的时候加了一个第六张（第一张图片）

2、添加圆点的逻辑：圆点：1、圆点跟着左右点击圆点切换背景 2、点击圆点，执行图片切换

3、自动轮播：

4、鼠标移入移除

重点：整个轮播最关键的点bs的一个变化 1.左右点击--对bs进行++ -- 2、在执行图片的向左移动时，用到bs 3、圆点的切换

整个自动轮播案例：<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>

//箭头的点击事件
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"
}
}