如何在javascript中制作自动幻灯片

How to make an automatic slideshow in javascript

本文关键字：幻灯片 javascript      更新时间：2023-09-26

我试图用这些图像制作一个自动幻灯片，每当我尝试这个时，它就会卡在第一张图像上。http://jsfiddle.net/He9AV/5/

HTML: 

<div id="slideshow">
    <a href="../images/food/e_chicken_quesa.jpg" target="_blank"><img class="show" src="../images/food/chicken_quesa.jpg" alt="Chicken Quesadilla" title="Chicken Quesadilla"></a>
    <a href="../images/food/e_steak.jpg" target="_blank"><img src="../images/food/steak.jpg" alt="Beef Tenderloin" title="Beef Tenderloin"></a>
    <a href="../images/food/e_pasta_display.jpg" target="_blank"><img src="../images/food/pasta_display.jpg" alt="Pasta Station" title="Pasta Station"></a>
    <a href="../images/food/e_salmon.jpg" target="_blank"><img src="../images/food/salmon.jpg" alt="Salmon Filet" title="Salmon Filet"></a>
    <a href="../images/food/e_panacotta.jpg" target="_blank"><img src="../images/food/panacotta.jpg" alt="Panacotta" title="Panacotta"></a>
    <a href="../images/food/e_beet_salad.jpg" target="_blank"><img src="../images/food/beet_salad.jpg" alt="Beet Salad" title="Beet Salad"></a>
    <a href="../images/food/e_tuna.jpg" target="_blank"><img src="../images/food/tuna.jpg" alt="Seared Tuna" title="Seared Tuna"></a>
    <a href="../images/food/e_foi_gras.jpg" target="_blank"><img src="../images/food/foi_gras.jpg" alt="Foi Gras" title="Foi Gras"></a>
</div>

我不确定错误发生在哪里，但这里是
Javascript: 

<script type="text/javascript">     
        var hovering = false;
        var slideshow = $("#slideshow");
        slideshow.mouseenter(function() {
            hovering = true;
        }).mouseleave(function() {
            hovering = false;
            slideShow();
        });
        function slideShow() {
            if (!hovering) {
                var currentImg = (slideshow.children("img:visible").length) ? slideshow.children("img:visible") : slideshow.children("img:first");
                var nextImg = (currentImg.next().length) ? currentImg.next() : slideshow.children("img:first");
                currentImg.delay(1000).fadeOut(500, function() {
                    nextImg.fadeIn(500, function() {
                        setTimeout(slideShow, 1000);
                    });
                });
            }
        }
        $(document).ready(function() {
            slideShow();
        });
        </script>

您可以在网站http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/中尝试演示

相关文章：