Slider en java script

[jimerosoft]

Hola que tal estoy intentando crear un slider Javascript y pues la verdad no me sale nada y no tengo idea como comensarlo.

Tengo 20 imágenes (categorías) y quiero ír pasando las images con una flechita y que valla cambiando uno por uno en una interface de 10 imagenes y pues cuando se de click a siguiente que muestre una de las que no estan y de las que estan que la quite pero solo 1.

<div style="display: block;" class="jcarousel-container jcarousel-container-vertical"><div disabled="false" style="display: block; visibility: visible;" class="jcarousel-prev jcarousel-prev-vertical fadeHover"><span style="opacity: 0;" class="hover"></span></div><div disabled="false" style="display: block; visibility: visible;" class="jcarousel-next jcarousel-next-vertical fadeHover"><span style="opacity: 0;" class="hover"></span></div><div class="jcarousel-clip jcarousel-clip-vertical"><ul style="height: 1278px; top: 0pt;" id="bottomList" class="bottomArea jcarousel-list jcarousel-list-vertical"><li jcarouselindex="1" class="jcarousel-item jcarousel-item-vertical jcarousel-item-1 jcarousel-item-1-vertical fadeHover fadeActivate"><span style="opacity: 0;" class="down"></span><span style="opacity: 0;" class="hover"></span><a href="/Carros/Acura/"><img width="75" height="75" border="0/" src="http://localhost/script/aspecto/images/marcas/Acura.png" alt="Acura"></a></li><li jcarouselindex="2" class="jcarousel-item jcarousel-item-vertical jcarousel-item-2 jcarousel-item-2-vertical fadeHover fadeActivate"><span style="opacity: 0;" class="down"></span><span style="opacity: 0;" class="hover"></span><a href="/Carros/Alfa Romeo/"><img width="75" height="75" border="0/" src="http://localhost/script/aspecto/images/marcas//Alfa Romeo.png" alt="Alfa Romeo"></a></li><li jcarouselindex="3" class="jcarousel-item jcarousel-item-vertical jcarousel-item-3 jcarousel-item-3-vertical fadeHover fadeActivate"><span style="opacity: 0;" class="down"></span><span style="opacity: 0;" class="hover"></span><a href="/Carros/Audi/"><img width="75" height="75" border="0/" src="http://localhost/script/aspecto/images/marcas/Audi.png" alt="Audi"></a></li><li jcarouselindex="4" class="jcarousel-item jcarousel-item-vertical jcarousel-item-4 jcarousel-item-4-vertical fadeHover fadeActivate"><span style="opacity: 0;" class="down"></span><span style="opacity: 0;" class="hover"></span><a href="/Carros/Bentley/"><img width="75" height="75" border="0/" src="http://localhost/script/aspecto/images/marcas//Bentley.png" alt="Bentley"></a></li><li jcarouselindex="5" class="jcarousel-item jcarousel-item-vertical jcarousel-item-5 jcarousel-item-5-vertical fadeHover fadeActivate"><span style="opacity: 0;" class="down"></span><span style="opacity: 0;" class="hover"></span><a href="/Carros/BMW/"><img width="75" height="75" border="0/" src="http://localhost/script/aspecto/images/marcas//BMW.png" alt="BMW"></a></li><li jcarouselindex="6" class="jcarousel-item jcarousel-item-vertical jcarousel-item-6 jcarousel-item-6-vertical fadeHover fadeActivate"><span style="opacity: 0;" class="down"></span><span style="opacity: 0;" class="hover"></span><a href="/Carros/Buick/"><img width="75" height="75" border="0/" src="http://localhost/script/aspecto/images/marcas//Buick.png" alt="Buick"></a></li><li jcarouselindex="7" class="jcarousel-item jcarousel-item-vertical jcarousel-item-7 jcarousel-item-7-vertical fadeHover fadeActivate"><span style="opacity: 0;" class="down"></span><span style="opacity: 0;" class="hover"></span><a href="/Carros/Cadillac/"><img width="75" height="75" border="0/" src="http://localhost/script/aspecto/images/marcas//Cadillac.png" alt="Cadillac"></a></li><li jcarouselindex="8" class="jcarousel-item jcarousel-item-vertical jcarousel-item-8 jcarousel-item-8-vertical fadeHover fadeActivate"><span style="opacity: 0;" class="down"></span><span style="opacity: 0;" class="hover"></span><a href="/Carros/Chery/"><img width="75" height="75" border="0/" src="http://localhost/script/aspecto/images/marcas//Chery.png" alt="Chery"></a></li><li jcarouselindex="9" class="jcarousel-item jcarousel-item-vertical jcarousel-item-9 jcarousel-item-9-vertical fadeHover fadeActivate"><span style="opacity: 0;" class="down"></span><span style="opacity: 0;" class="hover"></span><a href="/Carros/Chevrolet/"><img width="75" height="75" border="0/" src="http://localhost/script/aspecto/images/marcas//Chevrolet.png" alt="Chevrolet"></a></li></ul></div></div>

Espero su ayuda..

[alexg88]

Porque no utilizas alguno de los muchísimos plugins que existen para crear sliders.

Es lo más sencillo y si ya hecho, para que reinventar la rueda (a no ser que quieras hacerlo para aprender).

Ejemplos:

http://www.smoothdivscroll.com/

http://tobia.github.com/CrossSlide/

http://www.creativosonline.org/blog/...avascript.html