循环通过Div

Question

我需要使用jQuery循环一些div.循环的意思是我有一系列7个div:

<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>

我需要发生的是每5秒我需要他们改变.因此div"Content-1"将显示5秒钟,然后div"Content 2"将显示5秒等.

我觉得这很容易做到,但在JavaScript和jQuery方面我是个白痴.

Answer 1

var divs = $('div[id^="content-"]').hide(),
    i = 0;

(function cycle() { 
    divs.eq(i).fadeIn(400)
              .delay(5000)
              .fadeOut(400, cycle);

    i = ++i % divs.length; // increment i, 
                           //   and reset to 0 when it equals divs.length
})();

演示:( 延迟时间较短) http://jsfiddle.net/eFjnU/

如果您不想要淡入淡出动画,请使用show和hide.你仍然需要给出一个持续时间,以便delay回调和工作.

var divs = $('div[id^="content-"]').hide(),
    i = 0;

(function cycle() { 

    divs.eq(i).show(0)
              .delay(1000)
              .hide(0, cycle);

    i = ++i % divs.length;

})();

演示:( 延迟时间较短) http://jsfiddle.net/eFjnU/1/

Answer 2

简单的jQuery淡入淡出画廊幻灯片

悬停时暂停:

// 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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="fadeShow gal_1">
  <div style="background:#0bf;">1 Hover to pause</div>
  <div style="background:#fb0;">2 You can have as many slideshows as you want</div>
  <div style="background:#b0f;">3</div>
</div>

<div class="fadeShow">
  <p>LOREM</p>
  <p>IPSUM</p>
  <p>DOLOR</p>
  <p>SOMETHING</p>
</div>

.fadeShow()jQuery插件

如果你想将它转换为一个简单的jQuery插件,以允许不同的淡入淡出和暂停值,并包括其他选项:

// 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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="fadeShow gal1">
  <div style="background:#0bf;">1 Hover to pause</div>
  <div style="background:#fb0;">2 You can have as many slideshows as you want</div>
  <div style="background:#b0f;">3</div>
</div>

<div class="fadeShow gal2">
  <p>pauseHover : false</p>
  <p>IPSUM</p>
  <p>DOLOR</p>
  <p>SOMETHING</p>
</div>