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

有很多东西已经做到了这一点，你可能更容易使用其中之一。Bootstrap 有一个，这里是它的链接。

它的用法非常简单。