Question

我正试图用这些图片制作幻灯片：每当我尝试这个时，它就会卡在第一张图片上。

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

Answer 1

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

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

Answer 2

<html>
<head>

<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Load the CloudCarousel JavaScript file -->
<script type="text/JavaScript" src="cloud-carousel.1.0.5.js"></script>

<script>
$(document).ready(function(){

    // This initialises carousels on the container elements specified, in this case, carousel1.
    $("#carousel1").CloudCarousel(      
        {           
            xPos: 128,
            yPos: 32,
            buttonLeft: $("#left-but"),
            buttonRight: $("#right-but"),
            altBox: $("#alt-text"),
            titleBox: $("#title-text")
        }
    );
});

</script>

</head>
    <body>
        <!-- This is the container for the carousel. -->
        <div id = "carousel1" style="width:1000px; height:700px;background:#000;overflow:scroll;">            
            <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
            <!-- You can place links around these images -->
            <img class = "cloudcarousel" src="images/Chrysanthemum.jpg" alt="Flag 1 Description" title="Flag 1 Title" />
            <img class = "cloudcarousel" src="images/Desert.jpg" alt="Flag 2 Description" title="Flag 2 Title" />
            <img class = "cloudcarousel" src="images/Hydrangeas.jpg" alt="Flag 3 Description" title="Flag 3 Title" />
            <img class = "cloudcarousel" src="images/Koala.jpg" alt="Flag 4 Description" title="Flag 4 Title" />
        </div>

        <!-- Define left and right buttons. -->
        <input id="left-but"  type="button" value="Left" />
        <input id="right-but" type="button" value="Right" />

        <!-- Define elements to accept the alt and title text from the images. -->
        <p id="title-text"></p>
        <p id="alt-text"></p>
    </body>
</html>

Answer 3

Jquery中有许多花哨的轻量级图像幻灯片插件。检查
http://wowslider.com/rq/jquery-images-slider/
http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html

如何在javascript中制作幻灯片

3 个答案: