Question

我每隔几秒就会有5张图片的幻灯片。它应该转到下一个图像，然后循环。

当前发生的是第一张图像显示，然后转换到下一张图像。当下一个出现时，它会闪回第一张图像。然后它会在系列中显示第三张图像，但会再次闪回第一张图像。这一直持续到第五张图像。

但是一旦它再次循环到第一张图像（经过所有五张图片之后），一切都可以正常工作。每张图像都会停留3秒钟，然后继续前进，不会跳回图像中的任何一个或任何图像。

这是我正在使用的代码。

HTML：

<div id="slideshow">
   <div>
     <img src="Images/1.gif">
   </div>
   <div>
     <img src="Images/2.gif">
   </div>
   <div>
     <img src="Images/3.gif">
   </div>
   <div>
     <img src="Images/4.gif">
   </div>
   <div>
     <img src="Images/5.gif">
   </div>
</div>

CSS：

#slideshow { 
    clear: both;
    margin: 50px auto; 
    position: relative; 
    max-width: 960px; 
    height: 643px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

#slideshow img {
    max-width: 100%;    
}

JS：

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(800)
    .next()
    .fadeIn(800)
    .end()
    .appendTo('#slideshow');
},  3000);

我放在一起的实际网站就在这里，所以你可以看到它的实际效果：

schmelzerwedding.com

任何帮助使它不会像这样跳回去将非常感激。谢谢！

Answer 1

就像我在评论中提到的那样，我认为使用appendTo()可能是罪魁祸首。我也相信做表现不是最好的事情。

这是一个版本，可以简单地跟踪我们所使用的幻灯片并增加数量。

＆＃13;

(function () {
  var slideshow = document.getElementById('slideshow');
  var slides = slideshow.getElementsByTagName('img');
  var currSlide = 0;
  var numSlides = slides.length;
  
  // Set first slide to active
  slides[currSlide].classList.add('active');
  
  setInterval(function () {
    slides[currSlide].classList.remove('active');
    currSlide = (currSlide + 1) >= numSlides ? 0 : currSlide + 1;
    slides[currSlide].classList.add('active');
  }, 2000);
})();

＆＃13;

#slideshow {
  position: relative;
  width: 200px;
  height: 200px;
}

#slideshow img {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: opacity .2s ease-out;
}

#slideshow img.active {
  opacity: 1;
}

＆＃13;

<div id="slideshow">
<img src="http://placehold.it/199x199">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/201x201">
<img src="http://placehold.it/202x202">
</div>

＆＃13;

编辑：如果您（出于某种原因）不想使用纯JS，那么jQuery中的代码相同：

(function () {
    var slideshow = $('#slideshow');
    var slides = slideshow.find('> *');
    var currSlide = 0;
    var numSlides = slides.length;

    slides.eq(currSlide).addClass('active');

    setInterval(function () {
        slides.eq(currSlide).removeClass('active');
        currSlide = (currSlide + 1) >= numSlides ? 0 : currSlide + 1;
        slides.eq(currSlide).addClass('active');
    }, 200);
})();

Answer 2

使用jQuery：

//Just for demo - takes a few secs to load the images
setTimeout(function(){
  $('#ld').hide();
},500);


var cnt = 0;
$("#slideshow > div:gt(0)").hide();
setTimeout(showSlide, 2000);

function showSlide() {
  cnt++;
  cnt = (cnt>3)?0:cnt;
  $("#slideshow > div").fadeOut();
  $("#slideshow > div:eq("+cnt+")").fadeIn();
  setTimeout(showSlide, 2000);
}

#slideshow {clear:both;margin:50px auto;position:relative;max-width:960px;height:643px;padding:10px;box-shadow:0 0 20px rgba(0, 0, 0, 0.4);}

#slideshow > div {position:absolute;top:10px;left:10px;right:10px;bottom:10px;}

#slideshow img {max-width:100%;}

/* For Demo Only */
#ld{position:absolute;top:10%;left:20%;font-size:5rem;text-shadow:5px;z-index:2;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
  <div><img src="http://placekitten.com/550/200"></div>
  <div><img src="http://placekitten.com/548/200"></div>
  <div><img src="http://placekitten.com/550/202"></div>
  <div><img src="http://placekitten.com/548/202"></div>
</div>
<div id="ld">Loading . . . </div>

Answer 3

Boostrap无法立即拾取jQuery，尝试更改它们在头部调用的顺序。

Jquery幻灯片中的图片口吃并且显示不正确

3 个答案: