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(){})
网友评论