Question

我在（http://code.google.com/p/prototype-carousel/）找到了这段代码，但不知怎的，我无法让他去工作。有谁可以帮助我吗？图像加载正常但按钮简单无效。提前谢谢。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="scriptaculous.js"></script>
    <script type="text/javascript" src="carousel.js"></script>
<style type="text/css">

#carousel-wrapper {
    width: 980px;
    height: 580px;
    overflow: hidden;
}
#carousel-content {
    width: 2500px;
}
#carousel-content .slide {
    float: left;
    width: 980px;
    height: 580px;
}


</style>
</head>

<body>
<div id="carousel-wrapper">

    <div class="controls">
       <a href="javascript:" class="carousel-control" rel="next" style="float: right">Next</a>
       <a href="javascript:" class="carousel-control" rel="prev">Previous</a>
    </div>

    <div id="carousel-content">
        <div class="slide">
            <img src="sample1.jpg" />
       </div>

        <div class="slide">
            <img src="sample2.jpg" />
        </div>

        <div class="slide">
            <img src="sample3.jpg" />
        </div>

    </div>

    <script type="text/javascript">
    new Carousel('carousel-wrapper', $$('#carousel-content .slide'), $$('a.carousel-control'),
    { wheel:false, circular:true, auto:false, effect:scroll, frequency:5, duration:1, });
    </script>

</div>

</body>

</html>

Answer 1

您需要包含CSS

#carousel-wrapper {
   width: 500px;
   height: 500px;
   overflow: hidden;
}
#carousel-content {
   width: 2500px;
}
#carousel-content .slide {
   float: left;
   width: 500px;
   height: 500px;
}

您可能还应该将控件和<script>内容移到包装器之外。

这是一个有效的例子：

http://jsfiddle.net/eyweA/1/

Javascript Prototype-Carousel

1 个答案: