如何制作一个jQuery滑块循环

Question

我有一个滑块的下面的代码,它的工作完美,但滑块在经过图像到最后一个后停止.我想无限制地使这个滑块循环.代码是:

     <script type="text/javascript">
        $(function() {

      setInterval("rotateImages()", 3000);
        });

    function rotateImages() {
        var oCurPhoto = $('#chica div.current');
        var oNxtPhoto = oCurPhoto.next();
        if (oNxtPhoto.lenght == 0)
            onNxtPhoto = $('#chica div.first');

        oCurPhoto.removeClass('current').addClass('previous');
        oNxtPhoto.css({opacity:0.0}).addClass('current').animate({opacity:1.0},2000,
        function() {
            oCurPhoto.removeClass('prevous');
            });
        $('#images').animate({"left": "=0"}, 1000);
       }
       </script>

HTML是这样的:

      <div class="current">
     <a href="#"><img src="galeria_1.jpg" 
     alt="Galeria de Imagenes" width="960" height="310" class="galeria" /></a>
     </div>
     <div>
     <a href="#"><img src="galeria_1.jpg" alt="Galeria de Imagenes"               
     width="960" height="310" class="galeria" /></a>
     </div>

这是css:

   #chica div {
   position: absolute;
   z-index: 0;
  }

   #chica div.previous  {
   z-index: 1;
  }

   #chica div.current  {
   z-index: 2;
  }

如果它有帮助,这里链接到网站" http://negociosensanjuan.com/w/Bufetes/ "

我需要添加到jquery代码以使其循环？

Answer 1

悬停时循环和暂停:

var cur = 0, // Start Slide Index. We'll use ++cur to increment index
  pau = 2000,             // Pause Time (ms)
  fad = 500,              // Fade Time (ms)
  $ga = $('#gallery'),    // Cache Gallery Element
  $sl = $('> div', $ga),  // Cache Slides Elements
  tot = $sl.length,       // We'll use cur%tot to reset to first slide
  itv;                    // Used to clear on mouseenter

$sl.hide().eq(cur).show(); // Hide all Slides but desired one

function stop() { clearInterval(itv); }
function play() { itv = setInterval(anim, pau); }
function anim() { $sl.fadeOut(fad).eq(++cur % tot).stop().fadeIn(fad); }

$ga.hover(stop, play);
play(); // Play!

/*QuickReset*/
*{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}

/*Fade Gallery*/
#gallery {
  position: relative;
  width: 100%;
  height: 50vh;
}
#gallery > div {
  position: absolute; /* overlap each slide */
  width: inherit;     /* as #gallery parent */
  height: inherit;    /* as #gallery parent */
  background: transparent none 50% 50% / cover no-repeat;
}

<div id="gallery">
  <div style="background-image:url('//placehold.it/960x310/0bf/fff')">
    Hover...
  </div>
  <div style="background-image:url('//placehold.it/960x310/f0b/fff')">
    ...to...
  </div>
  <div style="background-image:url('//placehold.it/960x310/b0f/fff')">
    ...pause!
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>

如果你想使用CSS3来完成转换,你可以改变上面的处理类而不是jQuery的动画方法:

let cur = 0,
  itv = null;

const kls = "isVisible",
  $ga = $("#gallery"),
  $sl = $(">*", $ga),
  tot = $sl.length,
  stop = () => clearInterval(itv),
  play = () => itv = setInterval(anim, 2000),
  anim = () => {
    const $slCur = $sl.eq(cur);
    $sl.not($slCur).removeClass(kls);
    $slCur.addClass(kls);
    cur = ++cur % tot;
  };

$ga.hover(stop, play);
anim(); // Trigger current slide Visibility logic
play(); // Play!

/*QuickReset*/
*{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}

/*Fade Gallery*/
#gallery {
  position: relative;
  width: 100%;
  height: 50vh;
}
#gallery > * {
  position: absolute; /* overlap each slide */
  width: inherit;     /* as #gallery parent */
  height: inherit;    /* as #gallery parent */
  background: transparent none 50% 50% / cover no-repeat;
  
  transition: 0.7s;
  visibility: hidden;
  opacity: 0;
}

#gallery > *.isVisible { /* this class is handled by JS */
  visibility: visible;
  opacity: 1;
}

<div id="gallery">
  <div style="background-image:url('//placehold.it/960x310/0bf/fff')">
    Hover...
  </div>
  <div style="background-image:url('//placehold.it/960x310/f0b/fff')">
    ...to...
  </div>
  <div style="background-image:url('//placehold.it/960x310/b0f/fff')">
    ...pause!
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>