javascript - 关于轮播图JS如何调用储存变量里的定时器
本文介绍了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
这篇关于javascript - 关于轮播图JS如何调用储存变量里的定时器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文