备用 Slide/Un-slide 张图片

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

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

Answer 2

问题：

三张图片都正常滑动，只是你的第一张<img>总是被另外两张覆盖。

您要将 class slide 添加到所有图像，然后从其中一个图像中删除它。这意味着在任何时候，您的两张图片都会有 class slide。 DOM 后面的那个将始终出现在上面。

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

通过给 z-index 更高的 z-index.

强制 "upcoming" 图像出现在上面

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

方案二： （背景图片滑出）

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

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 3

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

而是根据其索引选择 .img，然后将 addClass 应用于该图像并使用 .eq() 方法删除 class。

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

备用 Slide/Un-slide 张图片

Alternate Slide/Un-slide of Images

jquery

slide