当前位置: 代码迷 >> 综合 >> 焦点轮播图(6) 自动播放
  详细解决方案

焦点轮播图(6) 自动播放

热度:60   发布时间:2023-12-12 14:35:53.0

点击事情完成了,现在来实现自动切换的功能!

原理很简单———定时器,相当于隔一段时间就调用一下点击右箭头事件!

首先全局定义一个定时器timer。
再分别给出自动切换函数和自动切换停止函数。

老规矩,上代码:

function play(){//自动切换函数timer = setInterval(function(){next.onclick();},3000);//每3秒触发一次点击右箭头事件}
function stop(){//自动切换停止函数clearInterval(timer);//清除定时器}

下面就要添加什么时候执行自动切换和停止函数了。

在鼠标移上轮播图时调用自动切换停止函数。其余时候执行自动切换函数!

所以就要写一个鼠标移动事件:

container.onmouseover = stop;//鼠标移动到容器内停止自动切换container.onmouseout = play;//鼠标在容器外执行自动切换play();

至此,焦点轮播图就全部完结啦!