hacer rotación de imagenes(slideshow)

[nuria1254]

buenas, soy una chica que está iniciando en el mundo web, y necesito una ayudita, me gustaría hacer una rotación de imágenes, igual que esta web:
http://www.magokarim.com/

Esta hecho con jquery, pero no tengo idea de ello...
QUE DIFERENCIA EXISTE ENTRE HACERLO CON JQUERY O CON FLASH?
Alguien me puede ayudar?
un saludo desde España

[ArturoGallegos]

Hola @Nuria bienvenida al foro,

La diferencia entre flash y jquery a mi ver, es que con jquery es mas amigable para los buscadores, mas fácil y rápido de editar (casi cualquiera puede hacerlo) y mejor compatibilidad con los dispositivos móviles.

con flash es mas complicada su edición y no cualquiera puede hacerlo, como ventaja seria que puedes agregar efectos y/o animaciones que con jquery no se pueden hacer, pero lamentablemente no es compatible con dispositivos móviles.

Particularmente a mi me gusta mucho usar este slideshow
http://jquery.malsup.com/cycle/
me parece muy fácil de implementar, personalizar y con una gran variedad de efectos.

[ArturoGallegos]

Iniciado por nuria1254

he mirao el link que me has puesto, pero no se como incluirlo en una web... soy nueva en esto y me cuesta jajajaj

bien para implementarlo descarga el js de la pagina que te enlace, posterior mente coloca estas lineas en el head de tu pagina... obviamente corrige las urls

Código HTML:

<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
 

y dentro del body coloca:

Código HTML:

<ul id="CycleSlideShow" class="CycleSlideShow">
            <li>
    <img src="img/Internet-graphic.png" alt="Internet-graphic" />
    <div class="content">
        <h2 class="titlehead">primer slide que se muestea</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,.</p>
    </div>
            </li>
            <li>
    <img src="img/Internet-graphic.png" alt="Internet-graphic" />
    <div class="content">
        <h2 class="titlehead">segundo slide a mostrar.</h2>
        <p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also.</p>
    </div>
            </li>
        </ul>
<script type="text/javascript">
$('#CycleSlideShow').after('<div id="navCSS" class="navCSS">').cycle({
    fx: 'fade',
    speed: 1000,
    timeout: 5000,
    pause: true,
    pager:  '.navCSS'
});
</script>
 

yo utilizo listas <ul> pero bien puedes usar div por ejemplo

Código HTML:

<div id="cycle">
       <div>tu contenido</div>
       <div>tu contenido</div>
</div>
 

si deseas solo imágenes

Código HTML:

<div id="cycle">
      <img />
      <img />
</div>
 

para mas referencia sobre las funciones trata de leer la documentación que hay en el sitio y donde tengas dudas comentalo y tratare de ayudarte

[cstudio]

Excelente recomendacion, era justo lo que buscaba para implementar unas imagenes en fade en un sitio en desarrollo, saludos.