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 に答える