0

私はこのコードを ( 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>
4

1 に答える 1

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/

于 2012-05-31T20:01:18.423 に答える