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

学到的思想：

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].clientWidth

console.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=I

setIndex()

cleardiv()

lis[index].className = 'active'

}

}



// 鼠标不在上面时，轮播起来，鼠标不在上面，不再轮播

start()

box.onmouseleave=function(){

start()

}

box.onmouseover=function(){

stop()

}

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

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

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