我有一个图像和标题的滚动轮播，它们单独交互但相互协调。当我在 IE、Firefox 和 Chrome 的页面/选项卡上时，一切都运行良好。然而，在 FF 和 Chrome 中，一旦我进入另一个选项卡或浏览器一段时间，轮播就会与我离开该页面的时间成比例地大幅滚动。
就好像它跟上了计时器，但不会推进轮播，直到我返回页面，然后 try catch 它应该在的位置，即使这是 10 多个循环。
显然，这并不理想，因此我们将不胜感激。以下是该页面的链接:http://www.dillonsupply.com/default.aspx?page=customer&file=customer/disupp/customerpages/home_test_fader.htm
这是我的 html:
<div class="marquee_container autoplay">
<div class="marquee_photos"></div>
<div class="marquee_caption">
<div class="marquee_caption_content"></div>
</div>
<div class="marquee_nav"></div>
</div>
<div class="marquee_panels">
<div class="marquee_panel">
<img src="customer/disupp/images/fader/NewWebsiteRotator.jpg" class="marquee_panel_photo" alt="New Website" width="731" height="310" />
<div class="marquee_panel_caption">
<h2>LONDON</h2>
<p>This is a test caption for San Diego.<br />This is a test caption for San Diego.</p>
<p><a href="#">Check it out!</a></p>
</div>
</div>
<div class="marquee_panel">
<img src="customer/disupp/images/fader/1DaySale-DeWaltProto.gif" class="marquee_panel_photo" alt="DeWalt and Proto 1-Day Only Sale" width="731" />
<div class="marquee_panel_caption">
<h2>Up to 60% Off DeWalt and Proto Tool Sets</h2>
<p>Mark you calendars for Thursday, December 15<sup>th</sup>. Don't miss out on your last chance this year to save big on the DeWalt and Stanley Proto tool sets you've been wanting.</p>
<p><a href="customer/disupp/promo_files/DeWalt-Proto_Telesales.pdf" onClick="window.open('customer/disupp/promo_files/DeWalt-Proto_Telesales.pdf','popup','scrollbars=no,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no'); return false">Check it out!</a></p>
</div>
</div>
<div class="marquee_panel">
<img src="customer/disupp/images/fader/GatesRotator.jpg" class="marquee_panel_photo" alt="Gates" width="731" /><a href="http://www.dillonsupply.com/default.aspx?page=item%20search%20results&SearchFieldName=VendorItemSearch&SearchSource=BrandsList&selVendorName=%22Gates+Corporation%22&selVendorCode=Gates%20Corporation"><img src="customer/disupp/images/fader/GatesRotator-Button.png" width="116" height="25" style="position:absolute; bottom:18px; left:126px;"/></a>
<div class="marquee_panel_caption">
<h2>Gates</h2>
</div>
</div>
<div class="marquee_panel">
<img src="customer/disupp/images/fader/BursRotator.jpg" class="marquee_panel_photo" alt="Burs" width="731" />
<div class="marquee_panel_caption">
<h2>NYC</h2>
<p>This is a test caption for NYC.<br />This is a test caption for NYC.</p>
<p><a href="#">Check it out!</a></p>
</div>
</div>
</div>
这是 jQuery:
var currentPanel = 1;
var totalPanels = 0;
var autoPlay = true;
var timePassed = 0;
var timeToChange = 6;
$ (document).ready(function (){
//Preload
$('.marquee_panels img').imgpreload(function(){
initializeMarquee();
});
setInterval(autoAdvance, 1000);
if(window.autoPlay == true){
$('.marquee_container').hover(
function(){
window.autoPlay = false;
$(this).removeClass('autoplay');
},
function(){
window.autoPlay = true;
window.timePassed = 0;
$(this).addClass('autoplay');
}
);
}
//Generate Photo Lineup
$('img.marquee_panel_photo').each(function (index){
var photoWidth = $('.marquee_container').width();
var photoPosition = index * photoWidth;
$('.marquee_photos').append('<img class="marquee_photo" style="left:'+photoPosition+'; display:inline-block" src="'+$(this).attr('src')+'" alt="'+$(this).attr('alt')+'" width="'+photoWidth+'" height="310" />');
$('.marquee_photos').css('width' , photoPosition+photoWidth);
});
//Generate Navigation Links
$('.marquee_panels .marquee_panel').each(function(index){
$('.marquee_nav').append('<a class="marquee_nav_item"></a>');
window.totalPanels = index + 1;
});
//Set up Navigation Links
$('.marquee_nav a.marquee_nav_item').click(function(){
//Set the navigation state
$('.marquee_nav a.marquee_nav_item').removeClass('selected');
$(this).addClass('selected');
var navClicked = $(this).index();
var marqueeWidth = $('.marquee_container').width();
var distanceToMove = marqueeWidth * (-1); //slides to the left, positive 1 for slide to right
var newPhotoPosition = navClicked * distanceToMove + 'px';
var newCaption = $('.marquee_panel_caption').get(navClicked);
window.currentPanel = navClicked + 1;
//Animate the photos and caption
$('.marquee_photos').animate({left: newPhotoPosition}, 1000); //time interval to slide
$('.marquee_caption').animate({top: '300px'}, 500, function (){
var newHTML = $(newCaption).html();
$('.marquee_caption_content').html(newHTML);
setCaption();
});
});
});
function autoAdvance(){
if(window.timePassed == window.timeToChange){
window.timePassed = 0;
if(window.currentPanel == window.totalPanels){
window.currentPanel = 0;
}
if(window.autoPlay == true){
$('.marquee_nav a.marquee_nav_item:nth-child('+ (window.currentPanel+1)+')').trigger('click');
}
}
else{
window.timePassed += 1;
}
}
function initializeMarquee(){
$('.marquee_caption_content').html(
$('.marquee_panels .marquee_panel:first .marquee_panel_caption').html()
);
$('.marquee_nav a.marquee_nav_item:first').addClass('selected');
$('.marquee_photos').fadeIn(1500);
setCaption();
}
function setCaption(){
var captionHeight = $('.marquee_caption').height();
var marqueeHeight = $('.marquee_container').height();
var newCaptionHeight = marqueeHeight - captionHeight - 15; //padding so that bottom of caption is away from bottom edge
$('.marquee_caption').delay(100).animate({top: newCaptionHeight}, 500);
}
任何帮助将不胜感激。预先感谢您。
**编辑 当我查看 marquee.js 脚本时，我想知道这是否是我在图像/标题更改之前计算时间的方式。我查看了一个旧的 slider 脚本，它使用了持续时间和间隔的组合(一个表示它停留在页面上的时间，另一个表示更改到下一个 slider 所需的时间)。但是，我不确定如何更改 autoAdvance 函数以便更好地反射(reflect)使用持续时间和间隔。
最佳答案
我最终使用了一个脚本来查看窗口是否处于焦点状态，如果没有聚焦则杀死选取框。这是我使用的脚本(也可以找到 http://www.thefutureoftheweb.com/blog/detect-browser-window-focus )，并根据我的目的进行了一些调整。这是我添加到 marquee.js 文件中的 jquery 片段:
//Is the Window or Tab in focus
function onBlur() {
window.window_focus = false;
};
function onFocus(){
window.window_focus = true;
};
if (/*@cc_on!@*/false) { // check for Internet Explorer
document.onfocusin = onFocus;
document.onfocusout = onBlur;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
}
然后在同一文件中，我编辑了 autoAdvance 函数，使 if 语句成为 autoplay 和 window_focus 变量的条件:
function autoAdvance(){
if(window.timePassed == window.timeToChange){
window.timePassed = 0;
if(window.currentPanel == window.totalPanels){
window.currentPanel = 0;
}
if(window.autoPlay == true && window.window_focus == true){
$('.marquee_nav a.marquee_nav_item:nth-child('+(window.currentPanel+1)+')').trigger('click');
}
}
else{
window.timePassed += 1;
}
}
它似乎可以在 Firefox、IE8 和 Chrome 中运行。目前我还没有在所有版本中进行测试。感谢 The Maniac 为我指明了正确的方向。
关于jquery - 轮播/选取框在 Firefox 和 Chrome 中在另一个页面/选项卡上后疯狂滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8345460/