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秒自动进行一次。我怎么能让它工作：

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

Jquery自动制作幻灯片

1 个答案: