点击事情完成了,现在来实现自动切换的功能!
原理很简单———定时器,相当于隔一段时间就调用一下点击右箭头事件!
首先全局定义一个定时器timer。
再分别给出自动切换函数和自动切换停止函数。
老规矩,上代码:
function play(){//自动切换函数timer = setInterval(function(){next.onclick();},3000);//每3秒触发一次点击右箭头事件}
function stop(){//自动切换停止函数clearInterval(timer);//清除定时器}
下面就要添加什么时候执行自动切换和停止函数了。
在鼠标移上轮播图时调用自动切换停止函数。其余时候执行自动切换函数!
所以就要写一个鼠标移动事件:
container.onmouseover = stop;//鼠标移动到容器内停止自动切换container.onmouseout = play;//鼠标在容器外执行自动切换play();
至此,焦点轮播图就全部完结啦!