Recursive Image Slider Fails in Webkit
I wrote a short little script to run through a list of images, fading them in and out, then repeat. The problem is that in Safari and Chrome, it doesn't return to the beginning. The oddest part is, when I print to console between images, it keeps occurring on regular intervals. It's like it's trying to display the images, they're just not showing up. Here's my code:
function fadingSlider(currentListItem, startListItem, fadeInDuration, displayDuration, fadeOutDuration) {
if(!currentListItem) {
startListItem.fadeIn(fadeInDuration).delay(displayDuration).fadeOut(fadeOutDuration, function() {fadingSlider(startListItem, startListItem, fadeInDuration, displayDuration, fadeOutDur开发者_Go百科ation);}); //#webmaster fade in, fade out, then recurse with start
}
else {
currentListItem = currentListItem.next("li");
if ((currentListItem.get(0)) === (currentListItem.parent().last("li").get(0))) {
startListItem.fadeIn(fadeInDuration).delay(displayDuration).fadeOut(fadeOutDuration, function() {fadingSlider(startListItem, startListItem, fadeInDuration, displayDuration, fadeOutDuration);});
}
currentListItem.fadeIn(fadeInDuration).delay(displayDuration).fadeOut(fadeOutDuration, function() {fadingSlider(currentListItem, startListItem, fadeInDuration, displayDuration, fadeOutDuration);});
}
}
jQuery(window).load(function() {
fadingSlider(null, jQuery("ul.sponsorSlider > li:first-child"), 300, 5000, 300);
});
All the "li"s are hidden in the CSS. An example is at the bottom of this page.
It appears your object
tags are throwing webkit for a loop. It's almost like they get hidden never to appear again. I'm gonna keep checking to see if i can fix that, but for now, i'd suggest replacing those object tags with images,
<img src="yadayada.jpeg"/>
This demonstrates what i mean - one has an object tag inside, one an image tag, and the rest text. Those with text or an image continue to fade in and out just fine, but the object one has trouble.
EDIT:
I wrote out the raw currentListItem
to the console and on the second time around, got:
[]
[…]
[Hi 2]
[Hi 3]
...that first one is the li
that had the object
in it, and it appears to have mysteriously vaporized. I'm guessing this is a webkit bug; but whatever it is, i'm thinking you should use images instead.
精彩评论