javascript - 关于轮播图JS如何调用储存变量里的定时器

问题描述

(function(){ var timer = null;hSlider(); function hSlider() { // 通过数组来控制slider内容切换var imgadr = [’images/banner_2.jpg’, ’images/banner_3.jpg’, ’images/banner_1.jpg’], headArray = [’Second Heading’, ’Third Heading’,’First Heading’], paraArray = [’First paragraph is awesome!’, ’Second paragraph goes here!’, ’Third paragraph for you’ ], slider = document.getElementById(’slider’), next = document.getElementById(’prev’), prev = document.getElementById(’next’), iNow = i = 0; // 获取slider作为画布,再通过改变数组来修改背景,标题和段落function _bg(iNow) { slider.style.background = 'url(’' + imgadr[i] + '’) no-repeat center /cover'; document.getElementById(’sliderHeader’).innerHTML = headArray[i]; document.getElementById(’sliderPara’).innerHTML = paraArray[i];} // 自动循环timer = setInterval(function() { _bg(iNow); // 定时器每调动一次,自加一实现切换效果 i++; if (i == imgadr.length) i = 0; }, 3500); // 上一页prev.onclick = function() { _bg(iNow); clearInterval(timer); i--; if (i == -1) i = imgadr.length - 1;} // 下一页next.onclick = function() { _bg(iNow); clearInterval(timer); i++; if (i == imgadr.length) i = 0; // setInterval(timer); 没有效果} }}

起因最近要实现一个全屏轮播图的功能,然后查询很多资料,也参考了很多的网站的代码,然后发现大多都是混淆过了的代码..看不太懂.然后自己造了个原生简陋的轮播图..由于js基础不扎实肯定有很多问题,希望dalao们能指出我错误 原理是把slider当画布,可以通过数组来控制切换背景和段落文字,设置定时器循环,每次循环数组i++起轮播的作用,控制器点击后' i++' 或者 'i--' 控制上下页.点击的时候我想清除点定时器,然后执行自加一翻页的效果,再添加回定时器. 那么问题来了我将定时器是储存到了一个变量中,那我该如何的再次调用他? 也可以放进一个函数里再调用 但感觉会不会不太好..?

问题解答

像这种我觉得setTimeout比setInterval更好控制：

var timer;function loop(){ timer = setTimeout(function() {_bg(iNow); // 定时器每调动一次,自加一实现切换效果 i++; if (i == imgadr.length) i = 0; loop(); }, 3500)}//清理的话只要clearTimeout(timer)就行了，然后重新调用loop