图像的交替幻灯片/内幻灯片

Question

有人可以帮我解决这个问题吗？我想让每张图片交替显示，但这次只显示 2 张图片。我的示例代码是here。

提前感谢您的帮助。

$(document).ready(function() {

  var count = -1;

  function slideImg() {
    var imgs = $('.img');
    var imgLength = imgs.length - 1;

    count < imgLength ? count++ : count = 0;
    imgs.addClass('slide').eq(count).removeClass('slide');
  }

  setInterval(slideImg, 5000);

});

.img-wrapper {
  position: relative;
  width: 200px;
  height: 300px;
  border: 1px solid #d9d9d9;
  overflow: hidden;
}

.img {
  position: absolute;
  right: -100%;
  -webkit-transition: 2s;
  transition: 2s;
}

.slide {
  right: 0 !important;
  -webkit-transition: 2s !important;
  transition: 2s !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-wrapper">
  <img class="img" src="https://unsplash.it/200/300?image=10" />
  <img class="img" src="https://unsplash.it/200/300?image=23" />
  <img class="img" src="https://unsplash.it/200/300?image=4" />
</div>

Answer 1

问题：

所有三个图像都正常滑动，只是您的第一个 <img> 总是被另外两个中的一个覆盖。

您正在将slide 类添加到所有图像，然后将其从一个图像中删除。这意味着在任何时候，您的两个图像都将具有 slide 类。在 DOM 中较晚的将始终出现在上方。

---

解决方案 1： （背景图片保留在原位）

通过给它一个更高的z-index 来强制“即将到来的”图像出现在上面。

//This would go *before* incrementing/resetting the count
imgs.css("z-index","").eq(count).css("z-index","2");

示例：

$(document).ready(function() {

  var count = -1;

  function slideImg() {
    var imgs = $('.img');
    var imgLength = imgs.length - 1;
    
    imgs.css("z-index","").eq(count).css("z-index","2");
    count < imgLength ? count++ : count = 0;
    imgs.addClass('slide').eq(count).removeClass('slide');
  }

  setInterval(slideImg, 5000);

});

.img-wrapper {
  position: relative;
  width: 200px;
  height: 300px;
  border: 1px solid #d9d9d9;
  overflow: hidden;
}

.img {
  position: absolute;
  right: -100%;
  -webkit-transition: 2s;
  transition: 2s;
}

.slide {
  right: 0 !important;
  -webkit-transition: 2s !important;
  transition: 2s !important;
}

.img.slide:first-child {
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-wrapper">
  <img class="img" src="https://unsplash.it/200/300?image=10" />
  <img class="img" src="https://unsplash.it/200/300?image=23" />
  <img class="img" src="https://unsplash.it/200/300?image=4" />
</div>

---

解决方案 2： （背景图片滑出）

不要在所有图像上使用slide 并将其从一张图像中删除，而是随时仅将slide 类应用于一张图像：

imgs.removeClass('slide').eq(count).addClass('slide');

示例：

$(document).ready(function() {

  var count = -1;

  function slideImg() {
    var imgs = $('.img');
    var imgLength = imgs.length - 1;
    
    count < imgLength ? count++ : count = 0;
    imgs.removeClass('slide').eq(count).addClass('slide');

  }

  setInterval(slideImg, 5000);

});

.img-wrapper {
  position: relative;
  width: 200px;
  height: 300px;
  border: 1px solid #d9d9d9;
  overflow: hidden;
}

.img {
  position: absolute;
  right: -100%;
  -webkit-transition: 2s;
  transition: 2s;
}

.slide {
  right: 0 !important;
  -webkit-transition: 2s !important;
  transition: 2s !important;
}

.img.slide:first-child {
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-wrapper">
  <img class="img" src="https://unsplash.it/200/300?image=10" />
  <img class="img" src="https://unsplash.it/200/300?image=23" />
  <img class="img" src="https://unsplash.it/200/300?image=4" />
</div>

Answer 2

其他答案和评论者是正确的，您将.slide 应用于所有图像。这是另一种实现方式，不需要处理 z-index。

相反，它会根据其索引选择.img，然后将addClass 应用于该图像，并使用.eq() 方法删除该类。

$(document).ready(function() {

  var count = 0;

  function slideImg() {
    var imgs = $('.img');
    var imgLength = imgs.length;

    count < imgLength ? count++ : count = 0;

    $(imgs[count - 1]).addClass('slide').eq(count).removeClass('slide');
  }

  setInterval(slideImg, 2000);
});

.img-wrapper {
  position: relative;
  width: 200px;
  height: 300px;
  border: 1px solid #d9d9d9;
  overflow: hidden;
}

.img {
  position: absolute;
  right: -100%;
  -webkit-transition: 2s;
  transition: 2s;
}

.slide {
    right: 0 !important;
    -webkit-transition: 2s !important;
    transition: 2s !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-wrapper">
   <img class="img" src="https://unsplash.it/200/300?image=10" />
   <img class="img" src="https://unsplash.it/200/300?image=23" />
   <img class="img" src="https://unsplash.it/200/300?image=4" />
</div>

Answer 3

$(document).ready(function() {

var count = 0;
  
function slideImg() {
  	var imgs = $('.img');

  	var imgLength = imgs.length - 1;
  	
  	count < imgLength ? count++ : count = 0;
  	imgs.removeClass('slide');
imgs.eq(count).addClass('slide');
}
  
setInterval(slideImg, 5000);

});

.img-wrapper {
  position: relative;
  width: 200px;
  height: 300px;
  border: 1px solid #d9d9d9;
  overflow: hidden;
}

.img {
  position: absolute;
  right: -100%;
  -webkit-transition: 2s;
  transition: 2s;
}

.slide {
  right: 0 !important;
  -webkit-transition: 2s !important;
  transition: 2s !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-wrapper">
  <img class="img" src="https://unsplash.it/200/300?image=10" />
  <img class="img" src="https://unsplash.it/200/300?image=23" />
  <img class="img" src="https://unsplash.it/200/300?image=4" />
</div>