Jquery自動幻燈片放映

Question

我做了一個幻燈片放映，我試圖自動化它。 HTML元素是這樣的：

<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> 

這裏是我的幻燈片：

$("#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; 
}); 

現在，我希望它每4秒automaticaly進行。我怎麼能有這樣的工作：

$('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;  
    } 

}); 

第一部分似乎選擇合適的標題，但沒有發生。有任何想法嗎？

Answer 1

$()或jQuery()不是變量，您不能通過使用$(this) = '...';覆蓋它。 $()是一個函數，它返回由選擇器過濾的一組元素。請參閱：.jQuery()

，而不是試圖重寫$(this)，只需創建一個新的變量，例如：

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;  
} 

和循環回到開始，這取決於你的HTML結構，但這樣的事情應該工作

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');