03自动轮播

1.功能描述

自动轮播图片，鼠标移入窗口就停止移动图片，鼠标移开重新播放图片。

2.思路

拿到所有按钮给所有按钮一个监听事件。当你点击按钮的时候，会添加一个样式，同时激活这个按钮。

监听事件后要做一个自动播放功能。首先获取当前是第0个，一共有size个，要播放第0个。

然后设置闹钟，每3秒触发第n+1个按钮。

当鼠标一移入窗口，就取消闹钟，当鼠标一移出就重新设置闹钟。

3.具体操作

3.1 给按钮添加监听事件

for(let i = 0; i < allButtons.length; i++){
  $(allButtons[i]).on('click',function(x){

      var index = $(x.currentTarget).index()  //监听事件
      var p = index * -300
      $('#images').css({
          transform:'translate(' + p + 'px)'
      })
      n = index
      activeButton(allButtons.eq(n))  //激活按钮
  })
}

3.2 自动播放

function playSlide (index){
    allButtons.eq(index).trigger('click')
}

3.3 设置闹钟

function setTimer (){
    return setInterval(()=>{
        n += 1
        playSlide( n % size)
    },5000)
}

3.4 取消闹钟

$('.window').on('mouseenter',function(){
    window.clearInterval(timerId)
})

4.相关知识点

横向布局：display: flex;

过渡动画：transition: all 0.5s

添加样式：$('#images').css({ transform:'translateX(0)' })

向x轴平移：transform:'translateX(0)'

元素增加样式且兄弟元素取消样式：allButtons.eq(n).addClass('red').siblings('.red').removeClass('red')

根据参数选择元素且trigger触发click事件：allButtons.eq(n%size).trigger(‘click’)

设置闹钟：setInterval(()=>{},1000)

取消闹钟：window.clearInterval(timerId)

鼠标移入：$('.window').on('mouseenter',function(){})

鼠标移出：$('.window').on('mouseleave',function(){})

5.实际成果