let i = 0 let timer; function changeStyle() { $('.img').eq(i).show().siblings().hide() $('.indexes li').eq(i).addClass('active').siblings().removeClass('active') } function run() { timer = setInterval(() => { if (++i === 4) i = 0 changeStyle() }, 1000) } run() $('.indexes li').click(function() { clearInterval(timer) i = $(this).index() changeStyle() run() }) $('.arrow-left').click(function() { clearInterval(timer) if(--i===-1) i =3 changeStyle() run() }) $('.arrow-right').click(function() { clearInterval(timer) if(++i===4) i=0 changeStyle() run() })
这里的代码是写轮播图的js代码 其中在写点击图片下方的按钮以及左右两侧的切换按钮 先进行清除时间函数 目的是方便获取当前li的索引值 以及对应图片的索引值 这样就不会出现按钮颜色与图片不相符合的现象了 不难发现其中多次用到封装函数 将其中的公共部分封装好 在其它函数语句里调用 方便快捷
