Advancing slideshow in jQuery
I use this piece of code from tutorialzine:
$(window).load(function(){
// The window.load event guarantees that all the images are loaded before the auto-advance begins.
var timeOut = null;
$('#slider_navigator .arrow, #slider_navigator .dot').cl开发者_JAVA技巧ick(function(e,simulated){
// The simulated parameter is set by the trigger method.
if(!simulated){
// A real click occured. Cancel the auto advance animation.
clearTimeout(timeOut);
}
});
// A self executing named function expression:
(function autoAdvance(){
// Simulating a click on the next arrow.
timeOut = setTimeout(autoAdvance,2000);
$('.slider_rightlink').trigger('click',[true]);
})();
});
This works like expected except one thing, the first slide is immediately advanced when I load the page. After loading it rotates nicely with the rest of the slides.
How can I change this so that it shows the first slide 2 seconds like the rest?
$(window).load(function(){setTimeout(function(){
// The window.load event guarantees that all the images are loaded before the auto-advance begins.
var timeOut = null;
$('#slider_navigator .arrow, #slider_navigator .dot').click(function(e,simulated){
// The simulated parameter is set by the trigger method.
if(!simulated){
// A real click occured. Cancel the auto advance animation.
clearTimeout(timeOut);
}
});
// A self executing named function expression:
(function autoAdvance(){
// Simulating a click on the next arrow.
timeOut = setTimeout(autoAdvance,2000);
$('.slider_rightlink').trigger('click',[true]);
})();
},2000);}
);
There's probably a setTimeout jQuery function, but this will work.
do not make it self executing function:
function autoAdvance(){
// Simulating a click on the next arrow.
timeOut = setTimeout(autoAdvance,2000);
$('.slider_rightlink').trigger('click',[true]);
};
timeOut = setTimeout(autoAdvance,2000);
精彩评论