var indexed = 0;
var mySetInt;
var timeSetInt;
$("#bannerDiv ul li:eq(0)").css({"background-image": "url(imgs/banner_01.jpg)","z-index": "1"});
$("#bannerDiv ul li:eq(1)").css("background-image", "url(imgs/banner02.jpg)");
$("#bannerDiv ul li:eq(2)").css("background-image", "url(imgs/banner03.jpg)");
mySetInt = setInterval(mySetIntFun, 5000);
timeSetInt =
function mySetIntFun() {
if(indexed >= 2) {
var index = 0;
} else {
var index = indexed + 1;
}
$("#bannerDiv ol li").eq(index).attr("class", "clickLi").siblings().removeAttr("class");
$("#bannerDiv ul li").eq(index).css({"left": "1920px","z-index": "2"}).animate({"left": "0px"}, 1000);
$("#bannerDiv ul li").eq(index).siblings().css("z-index", "0");
$("#bannerDiv ul li").eq(indexed).css("z-index", "1");
indexed = index;
}
$("#bannerDiv ol li").click(function() {
clearInterval(mySetInt);
var index = $(this).index();
if(index != indexed) {
// clearInterval(mySetInt01);
$(this).attr("class", "clickLi").siblings().removeAttr("class");
$("#bannerDiv ul li").eq(index).css({"z-index": "2"}).animate({"left": "0px"}, 1000);
$("#bannerDiv ul li").eq(index).siblings().css("z-index", "0");
$("#bannerDiv ul li").eq(indexed).css("z-index", "1");
indexed = index;
} else {};
var mySetInt01;
mySetInt01 = setInterval(mySetIntFun01, 5000);
function mySetIntFun01() {
if(indexed >= 2) {
var index = 0;
} else {
var index = indexed + 1;
}
$("#bannerDiv ol li").eq(index).attr("class", "clickLi").siblings().removeAttr("class");
$("#bannerDiv ul li").eq(index).css({
"left": "1920px",
"z-index": "2"
}).animate({
"left": "0px"
}, 1000);
$("#bannerDiv ul li").eq(index).siblings().css("z-index", "0");
$("#bannerDiv ul li").eq(indexed).css("z-index", "1");
indexed = index;
}
});
我在click事件里写了个新的定时器,但是每次触发click事件都会执行后面的定时器,到后面就会发生混乱,求大神指导,该怎么改才对
这个逻辑不应该是这样吗
click 移除 轮播计时器
setTimout(function(){( 添加轮播计时器 )},20000)
点击完20秒后执行的话 ,你应该用settimeout 啊
定时器用个对象存,js可以空值对象停止或开始
写个简单demo帮助你理解
var timer ;
function setTime(){
console.log("------start----")
timer = setInterval(function(){
console.log(1)
},1000)
}
setTime();
document.getElementById("timer").onclick = function(){
console.log("暂停5s")
clearInterval(timer)
setTimeout(setTime,5000)
}
html
click
$("#bannerDiv ol li").click(function() {
clearInterval(mySetInt);
var index = $(this).index();
if (index != indexed) { // clearInterval(mySetInt01);
$(this).attr("class", "clickLi").siblings().removeAttr("class");
$("#bannerDiv ul li").eq(index).css({ "z-index": "2" }).animate({ "left": "0px" }, 1000);
$("#bannerDiv ul li").eq(index).siblings().css("z-index", "0");
$("#bannerDiv ul li").eq(indexed).css("z-index", "1");
indexed = index;
} else {};
var mySetInt01;
mySetInt01 = setInterval(mySetIntFun01, 5000);
function mySetIntFun01() { if (indexed >= 2) { var index = 0; } else { var index = indexed + 1; } $("#bannerDiv ol li").eq(index).attr("class", "clickLi").siblings().removeAttr("class");
$("#bannerDiv ul li").eq(index).css({ "left": "1920px", "z-index": "2" }).animate({ "left": "0px" }, 1000);
$("#bannerDiv ul li").eq(index).siblings().css("z-index", "0");
$("#bannerDiv ul li").eq(indexed).css("z-index", "1");
indexed = index; }
});
你第一下点击清除后,第二个又执行了 这个 mySetInt01 = setInterval(mySetIntFun01, 5000);
这个是什么操作
var indexed = 0;
var mySetInt;
$("#bannerDiv ul li:eq(0)").css({"background-image": "url(imgs/banner_01.jpg)","z-index": "1"});
$("#bannerDiv ul li:eq(1)").css("background-image", "url(imgs/banner02.jpg)");
$("#bannerDiv ul li:eq(2)").css("background-image", "url(imgs/banner03.jpg)");
mySetInt = setInterval(mySetIntFun, 5000);
// var timeInt = setTimeout(mySetIntFun,5000);
function mySetIntFun() {
if(indexed >= 2) {
var index = 0;
} else {
var index = indexed + 1;
}
$("#bannerDiv ol li").eq(index).attr("class", "clickLi").siblings().removeAttr("class");
$("#bannerDiv ul li").eq(index).css({"left": "1920px","z-index": "2"}).animate({"left": "0px"}, 1000);
$("#bannerDiv ul li").eq(index).siblings().css("z-index", "0");
$("#bannerDiv ul li").eq(indexed).css("z-index", "1");
indexed = index;
}
$("#bannerDiv ol li").click(function() {
clearInterval(mySetInt);
var index = $(this).index();
if(index != indexed) {
$(this).attr("class", "clickLi").siblings().removeAttr("class");
$("#bannerDiv ul li").eq(index).css({"z-index": "2"}).animate({"left": "0px"}, 1000);
$("#bannerDiv ul li").eq(index).siblings().css("z-index", "0");
$("#bannerDiv ul li").eq(indexed).css("z-index", "1");
indexed = index;
} else {};
setTimeout(mySetIntFun,5000);
});
我这样改完了之后,点击时间之后,就再重新轮播了一次,然后就不再继续轮播了,我想让banner在5秒没有点击事件后,能继续轮播,哪里需要调整,是还要做判断吗