如何用JavaScript制作幻灯片 [英] How to make a slideshow in javascript

问题描述

我正在尝试使用以下图像进行幻灯片显示: 每当我尝试此操作时，它都会卡在第一张图像上.

Im trying to make a slideshow with these images: Whenever I try this, it gets stuck on first image.

<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:

Im not sure what part of the code is messing up, but here it is. 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>

推荐答案

使用cycle.js http://jquery.malsup.com/cycle/

Use cycle.js http://jquery.malsup.com/cycle/

$('#slideshow').cycle();

这篇关于如何用JavaScript制作幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！