Javascript Prototype-Carousel

我在（http://code.google.com/p/prototype-carousel/）找到了這段代碼，但不知何故，我無法管理他的工作。有人能幫助我嗎？圖像加載正常，但按鈕簡單不做任何事情。提前致謝。Javascript 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>

來源

2012-05-31 rmz

您需要包括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-31 20:01:18 JaredMcAteer

非常感謝您的幫助。我發現了最大的問題。這是來自「scriptaculous」的一些丟失的文件。我以爲我只需要像開發人員那樣的3個「Js」就說......：S – rmz

Javascript Prototype-Carousel

回答

相關問題