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