图像的交替滑动/滑动

Question

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

感谢您的帮助。

＆＃13;

＆＃13;

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

});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

 $( function() {
    $( "#dialog" ).dialog();
 } );

<div id="dialog" title="Basic dialog"><p>message</p></div>

Answer 2

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

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

＆＃13;

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>