效果展示

效果分析

1.右侧按钮点击，变量++，如果大于等于8，则复原0
2.左侧按钮点击，变量–，如果小于0，则复原最后一张
3.鼠标经过暂停定时器
4.鼠标离开开启定时器

思路分析

1.右侧按钮点击，变量++，如果大于等于8，则复原0

（1）获取右侧按钮
（声明全局信号量i 控制播放图片的张数）
（2）注册点击事件
（3）得到对应的对象
（4）渲染对应的数据
（5）更换小圆点

• 先移除原来的类名
• 当前li再添加这个类名

（6）判断条件：如果大于8，就复原为0

<script>
//获取元素
const img =document.querySelector('.slider-wrapper img')
let i = 0//信号量，控制播放轮播图片的张数
const p = document.querySelector('.slider-footer p')
const footer = document.querySelector('.slider-footer')
//1.右侧按钮业务
//1.1获取右侧按钮
const next = document. querySelector('.next')
//1.2注册点击事件
next.addEventListener('click',function(){
  i++
  if(i>=sliderData.length)
  {
    i=0
  }
   //调用函数
   toggle() 
})
</script>

2.左侧按钮点击，变量 - -，如果小于0，则复原最后一张

和右侧按钮判断条件正好相反，如果小于0 则爬到最后一张图片的索引号是7
（1）获取左侧按钮
（2）注册点击事件
（3）得到对应的对象
（4）渲染对应的数据
（5）更换小圆点
（6）判断条件：如果小于0 则爬到最后一张图片的索引号是7

<script>
  //2.右侧按钮业务
  //1.1获取右侧按钮
const prev = document. querySelector('.prev')
//1.2注册点击事件
prev.addEventListener('click',function(){
  i--
  if(i<0)
  {
    i=sliderData.length
  }
//调用函数 后有解释
toggle()
})

//小圆点
//先删除前面的类名 再在当前的li上加上类名
document.querySelector('.slider-indicator .active').classList.remove('active')
document.querySelector(`.slider-indicator li:nth-child( ${i + 1})`).classList.add('active')
}
</script>

※优化：左右侧按钮业务相同，可声明一个函数实现代码复用

<script>
//声明一个渲染的函数作为复用
function toggle (){
  img.src=sliderData[i].url
p.innerHTML=sliderData[i].title
footer.style.backgroundColor=sliderData[i].color
</script>

3.自动播放模块

js方法自动调用比让用户自己去调用要更简便

let timerId=setInterval(function (){
  //3.1利用js自动调用点击事件
  next.click()  //一定要加小括号调用函数
},1000)

4.鼠标经过暂停定时器

（1）注册事件 鼠标经过事件mouseenter
（2）鼠标经过停止定时器

//4.鼠标经过大盒子，停止自动播放
//4.1获取大盒子
const slider = document.querySelector('.slider')
slider.addEventListener('mouseenter',function (){
  clearInterval(timerId)
})

5.鼠标离开开启定时器

只需要复制3、4的代码
开定时器之前先关闭再重新开启一个新的

//4.鼠标离开大盒子，开启自动播放
slider.addEventListener('mouseleave',function (){
  //关闭定时器,先关后开好习惯
  clearInterval(timerId)
  //开启定时器
   timerId=setInterval(function (){
  //3.1利用js自动调用点击事件
  next.click()  //一定要加小括号调用函数
},1000)