javascript - 5秒ごとに画像をスライド

Question

これは私のスライドショーの画像です:

<section id="mainFooter">
            <div class="mainFooter">
                <p class="margRight">Jaafari Housseine &copy; 2013 <span>|</span> <a href="#!/page_privacy">Privacy Policy</a></p>
                <nav class="bgNav">
                    <ul>
                        <li class="active"><a href="images/picture1.jpg"><img src="images/pagination_act.png" alt="" class="img_act"></a></li>
                        <li><a href="images/picture2.jpg"><img src="images/pagination_act.png" alt="" class="img_act"></a></li>
                        <li><a href="images/picture3.jpg"><img src="images/pagination_act.png" alt="" class="img_act"></a></li>
                        <li><a href="images/picture4.jpg"><img src="images/pagination_act.png" alt="" class="img_act"></a></li>
                        <li><a href="images/picture5.jpg"><img src="images/pagination_act.png" alt="" class="img_act"></a></li>
                        <li><a href="images/picture6.jpg"><img src="images/pagination_act.png" alt="" class="img_act"></a></li>
                        <li><a href="images/picture7.jpg"><img src="images/pagination_act.png" alt="" class="img_act"></a></li>
                        <li><a href="images/picture8.jpg"><img src="images/pagination_act.png" alt="" class="img_act"></a></li>
                        <li><a href="images/picture9.jpg"><img src="images/pagination_act.png" alt="" class="img_act"></a></li>
                    </ul>
                </nav>
                <p class="fright text"><img src="images/envelope.png" alt="" class="envelope">Résidence Harmonie N°19, Boulevard Abdelkarim Khattabi</p>
            </div>  
</section>

そのために使用したjQueryスクリプト：

<script>
    $('ul li.active')(function(){$(this).removeClass("active")
        .delay(4500)
        .queue(function() {
            $(this).next('li').addClass("active");
            $(this).dequeue();
        });
    })
</script>

何もうまくいきません。

Answer 1

どのタグに「アクティブな」クラスが含まれているかを循環させようとして<li>いて、CSS が残りを処理する場合は、次のように実行できます。

<script>
    $(document).ready(function() {
        var items = $("nav.bgNav ul li");
        var index = -1;

        function next() {
            // if not the very first iteration, 
            // remove the active class from prev item
            if (index !== -1) {
                items.eq(index).removeClass("active");
            }
            // go to next item
            ++index;
            // if past end, wrap to beginning
            if (index >= items.length) {
                index = 0;
            }
            // add active class to next item
            items.eq(index).addClass("active");

            // schedule next iteration
            setTimeout(next, 4500);
        }

        next();
    });
</script>

コードはアクティブなクラスでのみ機能するため、このソリューションでは、アクティブなクラスがあるときに画像を表示し、アクティブなクラスがないときに画像を表示せず、画像間の必要な遷移を処理する CSS があることを前提としています。それがない場合は、それが必要になり、関連するページの残りの HTML/CSS を開示する必要があります。「アクティブ」クラスは魔法ではありません。CSS と組み合わせた場合にのみ機能します。

作業例: http://jsfiddle.net/jfriend00/UnuCL/

---

あなたがやろうとしていることの新しい理解に基づいて、実際の img.src を含むタグの href に変更する新しいコードを次に示します。デフォルトでは、各項目を循環します。マウスが特定のアイテムの上に置かれると、サイクルが停止し、そのアイテムに新しい画像が表示されます。マウスがそのアイテムを離れると、その画像が復元され、サイクリングが再開されます。ホバーしてそのアイテムを停止して表示し、ホバーを停止して自動サイクリングを開始できます。

$(document).ready(function() {
    // save original image URL for each
    var items = $("nav.bgNav ul li img");
    items.each(function() {
        $(this).data("orig-src", this.src);
    });

    var index = -1;
    var timer;

    function stop() {
        clearTimeout(timer);
    }

    function restore(i) {
        var oldItem;
        // if not the very first iteration, 
        // remove the active class from prev item
        if (i !== -1) {
            oldItem = items.eq(i);
            oldItem.closest("a").removeClass("active");
            oldItem.attr("src", oldItem.data("orig-src"));
        }
    }

    function display(i) {
        var newItem = items.eq(i);
        // change image .src based on parent <a> href
        newItem.attr("src", newItem.closest("a").attr("href"));

    }

    function next() {
        // restore currently active item
        restore(index);

        // go to next item
        ++index;
        // if past end, wrap to beginning
        if (index >= items.length) {
            index = 0;
        }

        display(index);

        // schedule next iteration
        timer = setTimeout(next, 1000);
    }

    next();

    // now make hover do the same thing
    $("nav.bgNav ul li img").hover(function() {
        var hoverIndex = $(this).closest("li").index();
        stop();
        restore(index);
        display(hoverIndex);        
    }, function() {
        var hoverIndex = $(this).closest("li").index();
        index = hoverIndex;
        next();
    })

    $("nav.bgNav ul li a").click(function() {
        // ignore clicks
        return false;
    });

});

完全な動作デモ: http://jsfiddle.net/jfriend00/ux2Cg/

Answer 2

すでにこれを行っているものがたくさんありますが、そのうちの 1 つを使用する方が簡単かもしれません。Bootstrap には 1 つあり、ここにリンクがあります。

その使用法は非常に簡単です。