近日布置了轮播图的作业，是基于小米官网上的轮播图来做，思路很清楚但是代码不好写

学到的思想：

1，封装函数，减少代码量，也更清楚每一步做的东西

2，声明需注意，所有Elements的都是输出数组，若需要具体的必须加下标，id是一对一不需要下标。

思路：

1，东西：一大盒子居中 一个盒子放图 两个箭头游离 一ul的点点

2，放图盒子大小设置有道道 放图盒子里面ul ulflex  根据index移动marginLeft即可

3，要实现的效果：

• 点击点点 对应图片出现
• 点击左右箭头，可以切换左右图片
• 箭头 鼠标在上样式变化 鼠标下来样式回去
• 图片盒子 鼠标在上停止轮播 鼠标出来轮播继续

4，需要写的函数：

• 索引变化并利用索引动marginLeft变得到图片变得效果 用在轮播动时需要索引，因点点动时需要索引，因箭头动时需要索引
• 轮播图计时器
• 轮播图停止函数
• 消除一些样式的函数 样式回去的函数

HTML：

<div id="sec"><div class="box"><ul><img src="./img/img1.webp" alt=""><img src="./img/img2.webp" alt=""><img src="./img/img3.webp" alt=""><img src="./img/img4.webp" alt=""><img src="./img/img5.jpg" alt=""></ul><div class="arrowleft arrow">&lt;</div><div class="arrowright arrow">&gt;</div><div class="dot"><ul><li class="active"></li><li></li><li></li><li></li><li></li></ul></div></div></div>

css样式：

*{margin: 0;padding: 0;}ul li{list-style: none;}body{background-color: aliceblue;}#sec{width: 1226px;height: 460px;margin: 0 auto;background-color: antiquewhite;position: relative;}.arrow{width: 50px;height: 70px;line-height: 70px;color: #565656;top: 165px;font-size: 50px;position: absolute;}.arrowover{width: 50px;height: 70px;line-height: 70px;color: white;top: 165px;font-size: 50px;position: absolute;background-color: #565656;}.arrowright{right: 0;width: 50px;height: 70px;line-height: 70px;color: #565656;top: 165px;font-size: 50px;position: absolute;}.box{width: 100%;height: 460px;overflow: hidden;}.box>ul{width: 500%;height: 100%;overflow: hidden;display: flex;background-size: 100% 100%;}.dot{width: 20%;height: 200px;position: absolute;right: 50px;top: 420px;}.dot ul{display: flex;justify-content: space-around;}.dot ul li{width: 15px;height: 15px;border-radius: 50%;background-color: #3e3d3f;border: 1px #9e9e9e;}.active{width: 15px;height: 15px;border-radius: 50%;border: 1px #9e9e9e;background-color: #9e9e9e;}

js：

首先写上window.οnlοad=function(){（我习惯js写在head里）

声明所有东西

//还是那句话，记得加[]下标哦~var box=document.getElementsByClassName('box')[0]var arrowleft=document.getElementsByClassName('arrowleft')[0]var arrowright=document.getElementsByClassName('arrowright')[0]var bot=document.getElementsByTagName('li')//索引的声明 名字不重要 但是他贯穿整个代码实现var index = 0;//这个小操作很实用，是选取的dot盒子里面的所有li标签的东西的集合let lis = document.querySelector('.dot').querySelectorAll('li')var ul=document.getElementsByTagName('ul')[0]console.log(ul)//测试var wrapWidth=document.getElementsByClassName('box')[0].clientWidthconsole.log(wrapWidth)//测试

函数部分

//往往需要改好多会，测试很多会，才能封装成函数

// 索引变化 可以用在轮播图动时，带动点点的变化，带动图片的变化function setIndex(){if(index<0){index=lis.length-1}if(index>lis.length-1){index=0}//这两个判断很重要，但对我来说又是很难，唉~//轮播图布局的方法-按照index往左右移动ul.style.marginLeft=- wrapWidth*index+'px'}// 计时器开始function start(){timer=setInterval(function(){index++setIndex()//大胆调用函数 加油cleardiv()lis[index].className = 'active'},1000)//计时器的格式请记牢，timer（随便什么名字）=setInterval(functiion(){},1000)}}// 计时器关闭function stop(){clearInterval(timer)//这小函数记住}// 消除之前的一些样式的function cleardiv() {for(let count = 0; count < lis.length; count ++) {lis[count].className = '';}//这小循环对我来说很难，很绕，再多练一下。}

开始写鼠标事件

左右箭头 点击事件

左右箭头 鼠标入鼠标出

点点 点击  好几个点点所以需要for循环lis数组的下标[]

图片盒子 鼠标入鼠标出 控制轮播

// 点击左右箭头 图片变化&&点点变化arrowleft.onclick=function(){index--setIndex()cleardiv()lis[index].className = 'active'}arrowright.onclick=function(){index++setIndex()cleardiv()lis[index].className = 'active'}// 鼠标浮在左右箭头上 箭头样式变化arrowleft.onmouseenter = function() {arrowleft.style.cssText = 'color:#8d8d8d;background-color: dimgrey;'}arrowleft.onmouseleave = function() {arrowleft.style.cssText = ''arrowleft.style.color = '#565656'}arrowright.onmouseenter = function() {arrowright.style.cssText = 'color:#8d8d8d;background-color: dimgrey;'}arrowright.onmouseleave = function() {arrowright.style.cssText = ''arrowright.style.color = '#565656'}// 点击点点   图片变化for(let i=0;i<lis.length;i++){lis[i].onclick=function(){index=IsetIndex()cleardiv()lis[index].className = 'active'}}// 鼠标不在上面时，轮播起来，鼠标不在上面，不再轮播start()box.onmouseleave=function(){start()}box.onmouseover=function(){stop()}

这样轮播图的效果就完成了

这次主要是练习js的函数使用和循环的使用。

视频效果的视频在csdn上传上了。有需要的可以下载参考。