Question

我正在制作幻灯片演示，如下所示。

$(function skewSlide() {
  myIndex = 4;
  i = (2 * myIndex) - myIndex;
  $(setInterval(function() {
    myIndex--
    n = (myIndex % 4) + 1;
    $('.modelbox img:nth-child('+ n +')').css({
      'clip-path': 'polygon(0 0, 100% 0, 100% -110%, -110% 100%, 0 100%)'
    })
    if (n == 1) {
      myIndex = 4;
    }
    console.log(n);
  }, 1000))
})

#canvas {
  position: relative;
  width: 100%;
  max-width: 2560px;
  display: flex;
  flex-flow: row;
  overflow: hidden;
  margin: 0 auto;
}
.modelbox{
  position: relative;
  width: 100%;
  height: 100vh;
  max-width: 2560px;
  object-fit: cover;
  transition: all 0.8s;
}
.modelbox img {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  transition: all 1.2s ease-in-out;
  clip-path: polygon(0 0, 100% 0, 100% 120%, 120% 100%, 0 100%);
}

<section id="canvas">
  <div class="modelbox">
    <img src="https://i.imgur.com/W20a2ZN.jpg" width="100%">
    <img src="https://i.imgur.com/LGaLIEM.jpg" width="100%">
    <img src="https://i.imgur.com/xvuGBMB.jpg" width="100%">
    <img src="https://i.imgur.com/Y2Xsdkr.jpg" width="100%">
  </div>
</section>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

剥离每个图像都可以正常工作。但是问题是我不知道如何在代码中重复/循环显示图像。

现在，当图像全部剥落时，图像不会循环播放。剥离完成后，它仅显示白色背景。

我的目标是使在最后一张图像下循环播放的图像被剥离，看起来像img-4，img-3，img-2，img-1，img-4，img-3，img-2 ，img-1。。

有什么方法或技巧来循环播放图像吗？

Answer 1

这是因为在通过JavaScript修改了每个图像'clip-path': 'polygon(0 0, 100% 0, 100% -110%, -110% 100%, 0 100%)'的CSS属性之后，您没有在每个循环结束时将其设置回原始状态（即clip-path: polygon(0 0, 100% 0, 100% 120%, 120% 100%, 0 100%);）。

循环播放内容时，切记每次循环结束后都要重置。

Answer 2

您在这里。如果您想举个例子。

$(function skewSlide() {
  var imgIndex = 0;
  var countImage = $(".modelbox img").length + 1;
      
  $(setInterval(function() {
      imgIndex++;
      $('.modelbox img:nth-child('+ imgIndex +')').css({'clip-path': 'polygon(0 0, 100% 0, 100% 120%, 120% 100%, 0 100%)'});
      
    if (imgIndex >= countImage) 
    {
      imgIndex = 0;
      for(var i=1;i<=4;i++)
      {
          $('.modelbox img:nth-child('+ i +')').css({
            'clip-path': 'polygon(0 0, 100% 0, 100% -110%, -110% 100%, 0 100%)'
          });
      }
    }
    console.log(imgIndex);
  }, 1000))
})

#canvas {
  position: relative;
  width: 100%;
  max-width: 2560px;
  display: flex;
  flex-flow: row;
  overflow: hidden;
  margin: 0 auto;
}
.modelbox{
  position: relative;
  width: 100%;
  height: 100vh;
  max-width: 2560px;
  object-fit: cover;
  transition: all 0.8s;
}
.modelbox img {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  transition: all 1.2s ease-in-out;
  clip-path: polygon(0 0, 100% 0, 100% -110%, -110% 100%, 0 100%);
}

<section id="canvas">
  <div class="modelbox">
    <img src="https://i.imgur.com/W20a2ZN.jpg" width="100%">
    <img src="https://i.imgur.com/LGaLIEM.jpg" width="100%">
    <img src="https://i.imgur.com/xvuGBMB.jpg" width="100%">
    <img src="https://i.imgur.com/Y2Xsdkr.jpg" width="100%">
  </div>
</section>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

如何在jQuery中重复或循环img选择器？

2 个答案: