Jquery Machen Sie eine Diashow automatisch

Question

Ich habe eine kleine Diashow gemacht und ich versuche es zu automatisieren. HTML-Elemente sind wie folgt aus:

<ul> 
    <li> 
    <h3 class="active-item" data-bg="background-image url">Title 1</h3> 
    <div class="news-excerpt"><p>The excerpt</p></div> 
    </li> 

    <li> 
    <h3 class="" data-bg="background-image url">Title 2</h3> 
    <div class="news-excerpt"><p>The excerpt</p></div> 
    </li> 

    <li> 
    <h3 class="" data-bg="background-image url">Title 3</h3> 
    <div class="news-excerpt"><p>The excerpt</p></div> 
    </li> 
</ul> 

Hier ist meine Diashow:

$("#alternative-navigation div#last-posts-fadeshow h3").click(function(){ 
    // Get url of the background image to show. 
    var bgvar = $(this).attr("data-bg"); 

    // Set the right post excerpt to show 
    $('.active-excerpt').removeClass('active-excerpt'); 
    $(this).next('.news-excerpt').addClass('active-excerpt'); 
    $('.active-item').removeClass('active-item'); 
    $(this).addClass('active-item'); 
    Cufon.refresh(); 
    //alert (bgvar); 

    // Switch to right background image 
    $("#background-image-container").fadeTo('medium', 0.1, function() 
    { 
     $("#background-image-container").css("background-image", "url(" + bgvar + ")"); 
    }).fadeTo('medium', 1); 
    return false; 
}); 

Jetzt möchte ich es automatisch alle 4 Sekunden ablaufen. Wie könnte ich das funktionieren lassen:

$('html').addClass('js'); 

$(function() { 

    var timer = setInterval(showDiv, 3000); 

    function showDiv() { 

     // Select the next post to show 
     $(this) = $('#alternative-navigation div#last-posts-fadeshow h3.active-item').parent().next().find('h3'); 

     // Get url of the background image to show. 
     var bgvar = $(this).attr("data-bg"); 

     // Set the right post excerpt to show 
     $('.active-excerpt').removeClass('active-excerpt'); 
     $(this).next('.news-excerpt').addClass('active-excerpt'); 
     $('.active-item').removeClass('active-item'); 
     $(this).addClass('active-item'); 
     Cufon.refresh(); 
     //alert (bgvar); 

     // Switch to right background image 
     $("#background-image-container").fadeTo('medium', 0.1, function() 
     { 
      $("#background-image-container").css("background-image", "url(" + bgvar + ")"); 
     }).fadeTo('medium', 1); 
     return false;  
    } 

}); 

Der erste Teil scheint den richtigen Titel auszuwählen, aber nichts passiert. Irgendwelche Ideen?

Answer 1

$() oder jQuery() ist keine Variable, Sie können sie nicht überschreiben, indem Sie $(this) = '...'; verwenden. $() ist eine Funktion, die einen Satz von Elementen zurückgibt, die durch einen Selektor gefiltert wurden. Siehe: .jQuery()

Anstatt zu versuchen, $(this) außer Kraft zu setzen, nur eine neue Variable erstellen, zum Beispiel:

function showDiv() { 

    // Select the next post to show 
    var el = $('#alternative-navigation div#last-posts-fadeshow h3.active-item').parent().next().find('h3'); 

    // Get url of the background image to show. 
    var bgvar = el.attr("data-bg"); 

    // Set the right post excerpt to show 
    $('.active-excerpt').removeClass('active-excerpt'); 
    el.next('.news-excerpt').addClass('active-excerpt'); 
    $('.active-item').removeClass('active-item'); 
    el.addClass('active-item'); 
    Cufon.refresh(); 
    //alert (bgvar); 

    // Switch to right background image 
    $("#background-image-container").fadeTo('medium', 0.1, function() 
    { 
     $("#background-image-container").css("background-image", "url(" + bgvar + ")"); 
    }).fadeTo('medium', 1); 
    return false;  
} 

Und Schleife zurück zum Start, hängt es von Ihrer HTML-Struktur, aber so etwas wie dies sollte Arbeit

var el = $('#alternative-navigation div#last-posts-fadeshow h3.active-item').parent().next().find('h3'); 
if (el.length == 0) 
    el = $('#alternative-navigation div#last-posts-fadeshow').first().find('h3');