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有一个，here is a link to it。

它的使用非常简单。

每5秒钟滑动一次图像

2 个答案: