У меня есть прокрутка каруселей изображений и подписей, которые взаимодействуют отдельно, но координируют.Все отлично работает, когда я нахожусь на странице / вкладке в IE, Firefox и Chrome.В FF и Chrome, однако, когда я немного перехожу на другую вкладку или в браузер, карусель прокручивается непропорционально пропорционально времени, в течение которого я отсутствовал на этой странице.
Это почти как если бы оно продолжало работатьс таймером, но не продвигает карусель до тех пор, пока я не вернусь на страницу и не попытаюсь наверстать упущенное, даже если это более 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);
}
Любая помощь будет оченьоценили.Заранее спасибо.
** edit Когда я смотрю на скрипт marquee.js, мне интересно, так ли я считаю время до того, как оно изменится, изображение / заголовок.Я посмотрел на старый скрипт слайдера, и он использовал комбинацию продолжительности и интервала (один для времени, в течение которого он оставался на странице, а другой - для времени, необходимого для перехода на следующий слайдер).Однако я не уверен, как изменить функцию autoAdvance, чтобы лучше использовать длительность и интервал.