Как бы я повторил или зацикливание селекторов img в jQuery? - PullRequest
Новая
       7

Как бы я повторил или зацикливание селекторов img в jQuery?

0 голосов
/ 19 декабря 2018

Я делаю слайд-шоу для практики, которое выглядит как показано ниже. 

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

Есть ли способы или советы для зацикливания изображений?

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Вот, пожалуйста.Если хотите с примером. 

$(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>
0 голосов
/ 19 декабря 2018

Это потому, что после того, как вы изменили свойство CSS каждого изображения 'clip-path': 'polygon(0 0, 100% 0, 100% -110%, -110% 100%, 0 100%)' с помощью JavaScript, вы не установили его обратно в исходное состояние (равное clip-path: polygon(0 0, 100% 0, 100% 120%, 120% 100%, 0 100%);) в конце каждого цикла.

При зацикливании вещей всегда не забывайте сбрасывать после завершения каждого цикла.

...