jquery Diashow: macht es besser

Question

Ich versuche, die Dia-Show ich unten verwenden, um zu genehmigen,

hier ist die html,

<!--slide--> 
<div id="slide"> 

    <ul class="slide"> 
     <li><img src="contents/slide-1.jpg" alt="slide 1"/></li> 
     <li><img src="contents/slide-2.jpg" alt="slide 2"/></li> 
     <li><img src="contents/slide-3.jpg" alt="slide 3"/></li> 
    </ul> 

</div> 
<!--slide--> 

becos ich eine Reihe von Foliensätze haben könnte ich will sie Schleife, oder ich könnte die ID Namen von Zeit zu Zeit ändern, so dass ich denke, die Funktionen in diesem Verfahren zu laufen, anstatt den Code in der Funktion jedes Mal für unterschiedliche Situation zu ändern,

run_slide('#slide'); 

so kann ich d oa mehrere Anrufe von den gleichen Funktionen,

run_slide('#slide-2'); 

run_slide('#slide-3'); 

unten ist die Funktion, der erste Teil der Funktion ok läuft, aber der zweite Teil davon ist nicht in Ordnung, wenn ich die id durch Intervall übergeben wollen - setInterval('loop_slide('+target_slide+')',5000);

ich habe diese Fehlermeldung auf meinem Firefox-Browser, das ich es nicht ganz verstehen,

unzulässige Zeichen [Pause auf diesem Fehler] loop_slide (#slide)

function run_slide(target_slide) { 

    //add a class the the first element 
    $('li:first-child',target_slide).addClass('active'); 

    //Set the opacity of all images to 0 
    $('.slide li').css({opacity: 0.0}); 

    //Get the first image and display it (set it to full opacity) 
    $('.slide li:first-child').css({opacity: 1.0}); 

    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds 
    setInterval('loop_slide('+target_slide+')',5000); 
} 

function loop_slide(target_slide) { 

    //var target_slide = $('#slide'); 

    //if no IMGs have the show class, grab the first image 
    var current = ($('.slide li.active')? $('.slide li.active') : $('.slide li:first-child')); 

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image 
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('.slide li:first-child') :current.next()) : $('.slide li:first-child')); 

    //Set the fade in effect for the next image, show class has higher z-index 
    current.addClass('last-active'); 
    next.css({opacity: 0.0}) 
    .addClass('active') 
    .animate({opacity: 1.0}, 1000, function(){ 
     current.animate({opacity: 0.0}, 1000).removeClass('active last-active'); 

     $('.caption p',target_slide).html(caption_description); 
    }); 

} 

Wie kann ich es beheben? Warum kann ich nicht die ID in die zweite Funktion übergeben, aber ich kann in der ersten Funktion?

vielen dank.

Answer 1

setInterval('loop_slide('+target_slide+')',5000); 

scheint das Problem zu sein, da die Variablen, die Sie wird analysiert passieren loop_slide (#slide) statt loop_slide ('# Dia') daher nicht eval.

einfache Lösung:

setInterval('loop_slide(\''+target_slide+'\')',5000); 

außer dass: Wenn Sie diesen Schieberegler erstellen für einen bestimmten Zweck Lernen könnte es eine gute Idee, es als ein jQuery-Plugin zu schreiben - http://docs.jquery.com/Plugins/Authoring sehen.