JQuery 幻灯片错误.图片在页面上列出，而不是随机播放.找不到错误

JQuery Slideshow error. Pictures list down the page instead of shuffling. Can't find the error

本文关键字：错误随机找不到播放幻灯片 JQuery 更新时间：2023-09-26

好的，所以我一直在为我的朋友编写一个网站，我一切正常，几乎准备好发布。但我可能在此过程中更改了一些内容并搞砸了语法。它可以像分号一样小（我已经搜索过，所以不是：]）。我不想寻求你的帮助，但我被困住了。请协助。

<!doctype html>
<html lang='en'>
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="The Sweetest Sin" />
        <meta name ="keywords" content = "bakery, sweetestsin, sweetest sin" />
        <title>The Sweetest Sin</title>
        <!-- include jQuery library -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <!-- include Cycle plugin -->
        <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.slideshow').cycle({
                    fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                });
            });
        </script>
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <div id="wrapper">
            <header>
                <h1> <a href="index.html"> The Sweetest Sin </a></h1>
                <ul id="nav">
                    <li id ="active"><a href="index.html">Home</a></li>
                    <li><a href="flavors.html">Flavors/Fillings</a></li>
                    <li><a href="gallery.html">Gallery</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                </ul> <!-- End Nav -->
            </header>   <!-- End Header -->
            <div id="banner"> </div>
            <div class="clearfix">
                <div id="social-media-icons"> 
                    <a href="https://facebook.com" target="_blank"> <img   src="images/facebook.png" /> </a>
                    <a href="https://twitter.com" target="_blank"> <img src="images/twitter.png" /> </a>
                </div> <!--end social -->
                <div class="left">
                    <div class="canvas">
                        <div class="slideshow">
                            <img src="images/image0.jpg" width="500" height="350" />
                            <img src="images/image1.jpg" width="500" height="350" />
                            <img src="images/image2.jpg" width="500" height="350" />
                            <img src="images/image2.5.jpg" width="500" height="350" />
                            <img src="images/image3.jpg" width="500" height="350" />
                            <img src="images/image3.5.jpg" width="500" height="350" />
                            <img src="images/image4.jpg" width="500" height="350" />
                            <img src="images/image4.5.jpg" width="500" height="350" />
                            <img src="images/image5.jpg" width="500" height="350" />
                            <img src="images/image5.5.jpg" width="500" height="350" />      
                            <img src="images/image6.jpg" width="500" height="350" />
                            <img src="images/image6.5.jpg" width="500" height="350" />
                            <img src="images/image7.jpg" width="500" height="350" /> 
                        </div>  <!-- End Slideshow -->
                    </div> <!-- End Canvas -->
                </div> <!-- End Left -->
                <div class="right">
                    <img src="images/thechef.png"/>
                    <h3>Welcome to the bakery</h3>
                    <p>The Bakery is now open!</p>
                </div> <!-- End Right -->
            </div>
            <footer>
                <p>&copy;2012 TheSweetestSin.net</p>
            </footer> <!-- End Footer -->
        </div> <!-- End Wrapper -->
    </body>
</html>

为 .slideshowdiv 指定固定高度并将溢出设置为隐藏：

.slideshow {
    width: 500px;
    height: 350px;
    overflow: hidden;
}