Cycle Through Divs

Question

I need to cycle through some divs using jQuery. What I mean by cycle is that I have a series of 7 divs:

Sample text
&         


        

Answer 1

Simple jQuery fade gallery slideshow

with pause on hover:

// FADESHOW // Simple fade gallery
$(".fadeShow").each(function() {

  var $slides = $(this).children(),
      tot = $slides.length,
      itv = null,
      idx = 0; 
      
  $slides.eq(idx).show();
  
  function anim() { $slides.fadeOut().eq(++idx % tot).fadeIn(); }
  function play() { itv = setInterval(anim, 2000); }
  function stop() { clearInterval(itv); }
  
  $(this).hover(stop, play);
  
  play();
  
});

body{margin:0;}

/* FADESHOW basic CSS */
.fadeShow {
  position:relative;
}
.fadeShow > * {
  position:absolute;
  display:none;
  height: inherit;
  width: 100%;
}

/* FADESHOW (your styles) */
.gal_1 { height:80px; }

  
1 Hover to pause
  
2 You can have as many slideshows as you want
  
3



  
LOREM
  
IPSUM
  
DOLOR
  
SOMETHING

.fadeShow() jQuery plugin

If you want to convert it to a simpls jQuery plugin in order to allow different fade and pause values and include other options:

// FADESHOW // Simple fade gallery by Roko :)
(function($){
  $.fn.fadeShow = function(options) {

    var op = $.extend({
      pause : 3800,
      fade  : 600,
      pauseHover : true
    }, options);

    return this.each(function() {

      var $slides = $(this).children(),
          tot = $slides.length,
          itv = null,
          idx = 0; 

      $slides.eq(idx).show();

      function anim() { $slides.fadeOut(op.fade).eq(++idx % tot).fadeIn(op.fade); }
      function play() { itv = setInterval(anim, op.fade+op.pause); }
      function stop() { clearInterval(itv); }

      if(op.pauseHover) $(this).hover(stop, play);

      play();

    });
  };
}(jQuery));


// Basic example
$(".gal1").fadeShow();

// With options
$(".gal2").fadeShow({
  pause : 4000,
  fade : 1000,
  pauseHover : false
});

/* FADESHOW basic CSS */
.fadeShow {
  position:relative;
}
.fadeShow > * {
  position:absolute;
  display:none;
  height: inherit;
  width: 100%;
}

/* FADESHOW (your styles) */
.gal1 { height:80px; }

  
1 Hover to pause
  
2 You can have as many slideshows as you want
  
3



  
pauseHover : false
  
IPSUM
  
DOLOR
  
SOMETHING