Cycle Divs and Thumbnails

Question

I'm hoping someone can save my me! I'm trying to create a (hopefully) simple rotating banner for my page. I have 7 divs that contain photos and text, they are as follows:

<div id="content-1">Sample text</div>
<div id="content-2">Sample text</div>
<div id="content-3">Sample text</div>
<div id="content-4">Sample text</div>
<div id="content-5">Sample text</div>
<div id="content-6">Sample text</div>
<div id="content-7">Sample text</div>

And below those divs I have 7 corresponding divs that are thumbnails:

<div id="thumb-content-1">Sample text</div>
<div id="thumb-content-2">Sample text</div>
<div id="thumb-content-3">Sample text</div>
<div id="thumb-content-4">Sample text</div>
<div id="thumb-content-5">Sample text</div>
<div id="thumb-content-6">Sample text</div>
<div id="thumb-content-7">Sample text</div>

I would like to do a few things:

1) Every 5 seconds cycle through a new div (so "content-1" would display for 5 seconds, then "content 2" etc.

2) Apply a class to the current thumbnail called "cr-rotator". I have the style already setup.

3) I would like to be able to pause it from rotating when a user hovers over either the main div or thumbnail div.

4) Lastly, I would like to have it so that if you hover over a thumbnail it would change the main content, then continue cycling when you mouse off. So say for example you hover over 'thumb-content-3' it will make the div 'content-3' visible and then when you mouse out it will continue cycling.

I understand there is a lot demanded here and I thank in advance anyone who can help me out. I have been provided a script to cycle through the main images but I'm not sure how to implement the 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
})();

Thank you so much to anyone that can help me.

Answer 1

Fade rotator - Demo on jsBin

<div id="rotator">

  <div id="slides">
    <div>Sample text 1</div>
    <div>Sample text 2</div>
    <div>Sample text 3</div>
  </div>

  <div id="thumbs">
    <div>1</div>
    <div>2</div>
    <div>3</div>   
  </div>

</div>

• Auto fade
• Pause on hover
• Hover on thumbs triggers the main slide
• Restart where stopped

And the jQ code:

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();
});

Answer 2

The simplest way to implement your desired functionality is to use Malsup's Cycle Plugin. Go to http://jquery.malsup.com/cycle/ and download the script, then look at the well-documented demos he's provided. Using Cycle gives you the opportunity to take advantage of a ton of different options which would take you forever to hand code.