关于#javascript#的问题:代码控制一个滚动的盒子,但是切换页面到别的地方,一段时间之后回来发现那个盒子在疯狂的滚动

代码控制一个滚动的广告盒子,平时正常滚动,但是切换页面到别的地方,一段时间之后回来发现那个盒子在疯狂的滚动。

// JavaScript Document
$(function () {  
        $('.Choicesnext').click(function () {  
            $(".Choices_banner ul").animate({marginLeft:"-1200px"},600, function () {  
                $(".Choices_banner ul>li").eq(0).appendTo($(".Choices_banner ul"));  
                $(".Choices_banner ul").css('marginLeft','0px');  
            });  
            $(".Choicestel ul").css('marginLeft','-1200px');  
            $(".Choicestel ul>li").eq(0).appendTo($(".Choicestel ul"));  
            $(".Choicestel ul").css({marginLeft:"0px"},600);
        })  
    })
      
$(function(){    
    function Choices(){
        $(".Choices_banner ul").animate({marginLeft:"-1200px"},600, function () {  
                    $(".Choices_banner ul>li").eq(0).appendTo($(".Choices_banner ul"));  
                    $(".Choices_banner ul").css('marginLeft','0px');  
                });  
                $(".Choicestel ul").css('marginLeft','-1200px');  
                $(".Choicestel ul>li").eq(0).appendTo($(".Choicestel ul"));  
                $(".Choicestel ul").css({marginLeft:"0px"},600);
        }
    setInterval("Choices()","4000");
    var tabChange = setInterval(Choices,4000);
        //鼠标悬停暂停切换
        $('.Choicesnext').mouseover(function(){
            clearInterval(tabChange);
        });
        $('.Choices_banner').mouseover(function(){
            clearInterval(tabChange);
        });
        $('.Choicesnext').mouseout(function(){
            tabChange = setInterval(Choices,4000);
        });
        $('.Choices_banner').mouseout(function(){
            tabChange = setInterval(Choices,4000);
        });
})


应该加一段判断失去页面焦点停止计时的代码就好了。
需要达到的效果是切换到别的页面之后,停止计时,返回页面后重新开始计时滚动。

网上找了一段代码:

$(document).ready(function(){
    $("#Choices").hover(
        function(){
            tabChange = setInterval(Choices,4000);
        },
        function(){
            clearInterval(tabChange);
        }
    )
});

这是鼠标事件,需要在页面块中插入一个ID,我把这个ID放在页面< html >标签中,现在能达到的效果就是鼠标进入页面就按设定的滚动,鼠标离开页面(包括移到浏览器工具栏,地址栏,电脑状态栏之类的地方),广告就停止了滚动。
想要的效果基本达到了80%,但我想要的并不是鼠标事件,而是切换窗口,比如切换到别的页面再切回来的效果,对于不懂代码的人来说,也算曲线救国基本成功,虽然路不同,但效果也算OK。
继续寻找切换窗口的方法。

window.onbeforeunload=function(e){
  clearInterval(tabChange)
}
可以试试这个,可以监听离开页面,然后清除定时器
你这个定时器可能需要定义的变量要保存在加载函数外面

网上找了一段代码:


$(document).ready(function(){
    $("#Choices").hover(
        function(){
            tabChange = setInterval(Choices,4000);
        },
        function(){
            clearInterval(tabChange);
        }
    )
});

这是鼠标事件,需要在页面块中插入一个ID,我把这个ID放在页面< html >标签中,现在能达到的效果就是鼠标进入页面就按设定的滚动,鼠标离开页面(包括移到浏览器工具栏,地址栏,电脑状态栏之类的地方),广告就停止了滚动。
想要的效果基本达到了80%,但我想要的并不是鼠标事件,而是切换窗口,比如切换到别的页面再切回来的效果,对于不懂代码的人来说,也算曲线救国基本成功,虽然路不同,但效果也算OK。
继续寻找切换窗口的方法。

你出页面的时候没有清除定时器,定时器一直在工作,导致你回到当前页面就开始执行定时器的任务,做一个离开当前页面的事件监听。在监听里面关掉定时器