代码控制一个滚动的广告盒子,平时正常滚动,但是切换页面到别的地方,一段时间之后回来发现那个盒子在疯狂的滚动。
// 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。
继续寻找切换窗口的方法。