2012-05-31 2 views
0

Я нашел этот код на (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> 

ответ

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/

+0

Большое спасибо за вашу помощь. Я нашел самую большую проблему. Это были некоторые недостающие файлы из «scriptaculous». Я думал, что мне нужно только то, что 3 «Js», как Dev сказали ...: S – rmz

Смежные вопросы