1

リスト項目のセットがあり、シームレスにフェードアウトして (次の項目) フェードインする必要があります。ここに私の（動作していない）コードがあります：

    document.ready(function(){

        var list_slideshow = $("#site_slideshow_inner_text");
        list_slideshow.children("li:not(:first)").hide();
        // here begins the function
        function changeList(){
        var list_slideshow = $("#site_slideshow_inner_text");       
        var length = 0;
            if(list_slideshow.length === length)
            {
                list_slideshow.children("li").eq(0).fadeOut(300, function()  
                            {
                $(this).next().fadeIn(300);
                });
            }
        }
        setTimeout(changeList(), 500);
});
4

1 に答える 1

5

関数にはいくつか問題があります。

  1. 関数の参照がsetTimeout間違っています (changelistの代わりに使用してくださいchangelist())。

  2. setTimeout呼び出しは 1 回だけなので、setInterval代わりに使用してください。

  3. ドキュメント準備完了関数を間違って呼び出しました ($(document).ready(function () {または単に使用します$(function () {

  4. changeList 関数のロジックが間違っていました (たとえば、list_slideshow.length === length常に false になります)。

次のコードは、意図したとおりにリスト項目をループします (ただし、必要に応じてタイミングを変更したい場合があります)。

$(function () {
    var list_slideshow = $("#site_slideshow_inner_text"),
        listItems = list_slideshow.children('li'),
        listLen = listItems.length,
        i = 0,
        changeList = function () {
            listItems.eq(i).fadeOut(300, function () {
                i += 1;
                if (i === listLen) {
                    i = 0;
                }
                listItems.eq(i).fadeIn(300);
            });
        };
    listItems.not(':first').hide();
    setInterval(changeList, 1000);
});

デモを見る

于 2013-05-11T22:00:40.290 に答える