weixin_40253609
weixin_40253609
2017-09-15 04:36
采纳率: 0%
浏览 3.8k

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事件都会执行后面的定时器,到后面就会发生混乱,求大神指导,该怎么改才对
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • github_38725775
    算不算码农 2017-09-15 05:30

    这个逻辑不应该是这样吗

    click 移除 轮播计时器

    setTimout(function(){( 添加轮播计时器 )},20000)

    点赞 评论
  • sunny_desmond
    carrykingdow 2017-09-15 05:41

    点击完20秒后执行的话 ,你应该用settimeout 啊

    点赞 评论
  • u010715243
    梦昼初PurpleShell 2017-09-15 06:32

    定时器用个对象存,js可以空值对象停止或开始

    点赞 评论
  • github_38725775
    算不算码农 2017-09-15 06:35

    写个简单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

    点赞 评论
  • sunny_desmond
    carrykingdow 2017-09-15 06:36
    $("#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); 这个是什么操作

    点赞 评论
  • weixin_40253609
    weixin_40253609 2017-09-15 07:09

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

相关推荐