I have this code to run a slideshow (this is only part of what really going in my code)
var slideshow = {
delay: 5000,
actions:[],
run: function() {
if (slideshow.actions.length) {
slideshow.actions.shift()();
setTimeout(slideshow.run, slideshow.delay);
}
}
};
var tn;
$(".sideimg").each(function(){
var that = this;
slideshow.actions.push(function(){
if (tn != "") {
out(tn);
}
over($(that).attr("id"));
var $paneTarget = $('#lyr1');
var $target = $paneTarget.find('#'+$(that).attr("id"));
$paneTarget.stop().scrollTo( $target , 800 );
$("#rimg").fadeOut("slow",function () {
$("#rimg").attr("src",$(that).attr("bsrc"));
$("#rimg").attr("alt",$(that).attr("alt"));
$("#rimg").fadeIn("normal");
});
tn = $(that).attr("id");
});
});
after finishing running each sideimg class it stops… i need to re start from the beggining…
i have tried to recall it – but nothing happend
thanks guys
For this situation, I wouldn’t use the each method at all. I’d use setTimeout, an array of object that have your image/href information, and a value that tells you where in the array of images you are. When you get to the end of the array, reset the value (the following code is simplified for clarity, and not tested):
Each time the function in your slideshow object is called, you really need to have that function load the next slide before it exits. The issue with having each reloop when it’s done, is the question: “When does it stop?” If you pre-load all the images, to continue forever, you’ll cause an infinite loop and more than likely crash the browser. You need the same function to set the image, then prepare the next image to be shown, but it should look no further in the future than the next image. Anytime you try to go beyond that, you’re at risk of creating an ever-growing collection of items that will never stop.