0

私は次の基本的な手順で Web サイトの機能に 取り組ん で い ます
。画像 6) 次のリスト アイテムに移動します (最後のアイテムでない限り、ループします)。





画像とキャプションを表示する関数、表示されるまでタイマー、それらをアニメーション化する関数を作成しました。私は現在、上記のステップ 6 をどのように実行するかについて戦っています。

基本的な HTML 構造は次のとおりです。

<ul>
    <li class="current">
        <img src="my_pic.jpg" />
        <div class="caption">This is my caption text.</div>
    </li>
    <li>
        <img src="my_pic.jpg" />
        <div class="caption">This is my caption text.</div>
    </li>
    <li>
        <img src="my_pic.jpg" />
        <div class="caption">This is my caption text.</div>
    </li>
</ul>

私の基本的な（非公式の構文）スクリプトは次のとおりです。

showCurrentListItem(); //Call the function that animates in the image & caption

setTimeout(function () { //Add a timer (Show for 5 seconds)
    hideCurrentListItem() //After 5 seconds, animate out the current list item
}, 5000)

私の主な質問は次のとおりです。この最初のリスト項目が完了した後、次のリスト項目を表示して非表示にするにはどうすればよいですか? （そして、最後のリスト項目に到達するとループするようにリセットします）

4

2 に答える 2

1

次のようなループで試してみませんか。

var i = 0;
function ShowItem(){ // i be the index of image
// Write your code to animate
// image and caption
setTimeout(function(){ HideListItem(); }, 5000);
}

function HideItem(){
// Write Logic to Hide
// Image and Caption
i++;
if(i == 3) {// or whatever is the total count
i=0;
}
ShowItem();
}
于 2013-09-18T16:44:50.490 に答える
0

jQuery.animateだけを使用しないのはなぜですか?

$('ul').on('click', 'li', function() {
    $('.current').hide().removeClass('current');
    $(this).addClass('current');
    $(this).animate({
        opacity: 0.25,
        height: "toggle"
    }, 5000, function() {
        $(this).hide();
    });
});
于 2013-09-18T16:56:31.517 に答える