0

我做了一个小幻灯片，我正在尝试使其自动化。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 秒自动进行一次。我怎样才能使它工作：

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

});

第一部分似乎选择了正确的标题，但没有任何反应。有任何想法吗？

4

1 回答 1

1

$()orjQuery()不是变量，您不能使用$(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');
于 2012-04-11T10:04:02.947 回答