jq中,点击事件触发前移除定时器,等点击完20秒后怎么才能继续执行定时器内容,做的是一个轮播图

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秒没有点击事件后,能继续轮播,哪里需要调整,是还要做判断吗