Divisiones de ciclo y miniaturas

¡Espero que alguien me pueda salvar! Estoy intentando crear un banner rotativo simple (con suerte) para mi página. Tengo 7 divs que contienen fotos y texto, son los siguientes:

Sample text
Sample text
Sample text
Sample text
Sample text
Sample text
Sample text

Y debajo de esos divs tengo 7 divs correspondientes que son miniaturas:

 
Sample text
Sample text
Sample text
Sample text
Sample text
Sample text
Sample text

Me gustaría hacer algunas cosas:

1) Cada 5 segundos realiza un ciclo a través de un nuevo div (por lo que “content-1” se mostrará durante 5 segundos, luego “content 2”, etc.

2) Aplique una clase a la miniatura actual llamada “cr-rotator“. Tengo el estilo ya configurado.

3) Me gustaría poder pausarlo para que no gire cuando un usuario se desplace sobre la div. Principal o la miniatura.

4) Por último, me gustaría tenerlo para que si pasas el cursor sobre una miniatura, cambie el contenido principal y luego continúe el ciclo cuando desactivas el mouse. Así que, por ejemplo, si pasas el cursor sobre ‘thumb-content-3’, se hará visible el div ‘content-3’ y luego, cuando pases el mouse, continuará su ciclo.

Entiendo que aquí se exige mucho y agradezco de antemano a cualquiera que pueda ayudarme. Me han proporcionado un script para recorrer las imágenes principales, pero no estoy seguro de cómo implementar el rest:

 var divs = $('div[id^="content-"]').hide(), i = 0; (function cycle() { divs.eq(i).fadeIn(200) .delay(3000) .fadeOut(200, cycle); i = ++i % divs.length; // increment i, // and reset to 0 when it equals divs.length })(); 

Muchas gracias a cualquiera que pueda ayudarme.

Fade rotator – Demo en jsBin

 
Sample text 1
Sample text 2
Sample text 3
1
2
3
  • Desvanecimiento automático
  • Pausa en el hover
  • Coloca el cursor sobre los pulgares y activa la diapositiva
  • Reiniciar donde se detuvo

Y el código jQ:

 var $el = $('#fader'), // SETUP //////// F = 600 , // Fade Time P = 2000 , // Pause Time C = 0 , // Counter / Start Slide# (0 based) /////////////////// $sl = $('#slides > div'), $th = $('#thumbs > div'), N = $sl.length, T = null; $sl.hide().eq(C).show(); $th.eq(C).addClass('on'); // ANIMATION function anim() { $sl.eq(C%N).stop(1).fadeTo(F,1).siblings().fadeTo(F,0); $th.removeClass('on').eq(C%N).addClass('on'); } // AUTO ANIMATE function autoAnim() { T = setTimeout(function() { C++; anim(); // Animate autoAnim(); // Prepare another iteration }, P+F); } autoAnim(); // Start loop // HOVER PAUSE $el.hover(function(e) { return e.type==='mouseenter'? clearTimeout( T ) : autoAnim(); }); // HOVER THUMBNAILS $th.on('mouseenter', function() { C = $th.index( this ); anim(); }); 

La forma más sencilla de implementar la funcionalidad deseada es usar el Complemento de Ciclo de Malsup. Vaya a http://jquery.malsup.com/cycle/ y descargue el guión, luego observe las demostraciones bien documentadas que ha proporcionado. El uso de Ciclo le brinda la oportunidad de aprovechar un montón de opciones diferentes que lo llevarán por siempre al código manual.