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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
