Pagina- http://zendold.lojcomm.com.br/icarousel/example3.asp
-Primero descaegue mootoolsv1.1.js y lo yame mootols
-Luego descargue icarousel
-Luego lo llame a mi pagina html
Código HTML:
<script type="text/javascript" src="mootools.js"></script> <script type="text/javascript" src="iCarousel.js"></script>
Código HTML:
<div id="example_3"> <ul id="example_3_content"> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/1.jpg" alt="flower 1" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/2.jpg" alt="flower 2" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/3.jpg" alt="flower 3" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/4.jpg" alt="flower 4" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/5.jpg" alt="flower 5" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/6.jpg" alt="flower 6" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/7.jpg" alt="flower 7" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/8.jpg" alt="flower 8" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/9.jpg" alt="flower 9" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/A.jpg" alt="flower A" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/B.jpg" alt="flower B" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/C.jpg" alt="flower C" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/D.jpg" alt="flower D" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/E.jpg" alt="flower E" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/F.jpg" alt="flower F" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/G.jpg" alt="flower G" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/H.jpg" alt="flower H" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/I.jpg" alt="flower I" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/J.jpg" alt="flower J" /></a></li> <li class="example_3_item"><a href="#"><img src="http://www.forosdelweb.com/images/flowers/K.jpg" alt="flower K" /></a></li> </ul> <div id="example_3_frame"> <img id="example_3_previous" src="http://www.forosdelweb.com/images/ex3_previous.gif" alt="move previous" /> <img id="example_3_next" src="http://www.forosdelweb.com/images/ex3_next.gif" alt="move next" /> </div> </div>
Código HTML:
<style type="text/css"> /* example_3 css */ #example_3 { position: relative; /* important */ overflow: hidden; /* important */ width: 470px; /* important */ height: 86px; /* important */ margin: 0 85px; background: #000; } #example_3_frame {position: relative} #example_3_previous {float: left;} #example_3_next {float: right;} #example_3_content { position: absolute; top: 0; margin-left: 20px; } #example_3_content #example_3_content li { list-style: none; margin: 0; padding: 0; } #example_3_content { width: 5418px; } #container_bd #example_3 ul li { display: block; float: left; margin: 5px; padding: 5px; border: 1px solid #666; background-color: #000; } #container_bd #example_3 ul li img { display: block; } </style>
Código HTML:
<script type> window.addEvent("domready", function() { new iCarousel("example_3_content", { idPrevious: "example_3_previous", idNext: "example_3_next", idToggle: "undefined", item: { klass: "example_3_item", size: 86 }, animation: { duration: 1000, amount: 4 } }); }); </script>