Javascript原型-轮播答案

【问题标题】：Javascript Prototype-CarouselJavascript原型-轮播
【发布时间】：2012-06-06 02:31:52
【问题描述】：

我在 (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>

【问题讨论】：

标签： javascript html css prototypejs scriptaculous

【解决方案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/

【讨论】：

非常感谢您的帮助。我发现了最大的问题。这是“scriptaculous”中丢失的一些文件。我以为我只需要开发人员所说的 3 个“Js”……：S