Я создаю слайдер изображения, и когда изображение возвращается на другую сторону экрана, оно не будет продолжать двигаться - PullRequest
Новая
       10

Я создаю слайдер изображения, и когда изображение возвращается на другую сторону экрана, оно не будет продолжать двигаться

0 голосов
/ 25 сентября 2019

Таким образом, моя идея состояла в том, чтобы я перемещал 4 изображения по 150 пикселей за клик влево, а когда изображение достигает конца экрана, оно переходит на другую сторону, чтобы оно могло повторить круг.Но как только изображение действительно попадает на правую сторону экрана, оно перестает двигаться при щелчке.

Мой код

`// ПЕРЕМЕННАЯ ДЛЯ МЕНЮ СЛАЙДЕР 

var move = 150;
// MEAL ITEM SLIDER IMAGES 
var imgFood1 = document.getElementById('imgFood1')
var imgFood2 = document.getElementById('imgFood2')
var imgFood3 = document.getElementById('imgFood3')
var imgFood4 = document.getElementById('imgFood4')
imgFood1.style.position = "relative"
imgFood2.style.position = "relative"
imgFood3.style.position = "relative"
imgFood4.style.position = "relative"

function menuSlider(){
    // GETTING THE POSITION OF THE IMAGES
    var positionImg1 = imgFood1.getBoundingClientRect();
    var positionImg2 = imgFood2.getBoundingClientRect();
    var positionImg3 = imgFood3.getBoundingClientRect();
    var positionImg4 = imgFood4.getBoundingClientRect();
    // MOVING THE IMAGES 
    imgFood1.style.right=move+"px"
    imgFood2.style.right=move+"px"
    imgFood3.style.right=move+"px"

        if(positionImg4.left > 0 ) {
            imgFood4.style.right=move+"px"
        }else {
            imgFood4.style.left="500px"
        }

    // INCREMENTING THE MOVE VALUE FOR THE NEXT FUNCTION CALL
    move+=150

}

button.addEventListener("click", menuSlider);

`

1 Ответ

0 голосов
/ 25 сентября 2019

Вы можете попробовать код ниже.Надеюсь, что это подходит для вашего случая. 

var move = 150;
// MEAL ITEM SLIDER IMAGES
var imgFood1 = document.getElementById('imgFood1')
var imgFood2 = document.getElementById('imgFood2')
var imgFood3 = document.getElementById('imgFood3')
var imgFood4 = document.getElementById('imgFood4')
imgFood1.style.position = "absolute"
imgFood1.style.left = 0;
imgFood2.style.position = "absolute"
imgFood2.style.left = '150px';
imgFood3.style.position = "absolute"
imgFood3.style.left = '300px';
imgFood4.style.position = "absolute"
imgFood4.style.left = '450px';

function menuSlider(){

    var arrayOfImages = [imgFood1,imgFood2,imgFood3,imgFood4];
    for(let i = 0; i < arrayOfImages.length; i++) {
      var positionImg = arrayOfImages[i].getBoundingClientRect();
      var leftValue = parseInt(arrayOfImages[i].style.left);
      if(positionImg.x < window.innerWidth) {
        arrayOfImages[i].style.left = leftValue + move + "px"
      }else {
        arrayOfImages[i].style.left = '0px'
      }

    }

}

document.getElementById('myButton').addEventListener("click", menuSlider);
#myButton {
  position: absolute;
  top: 160px;
}

.images-container {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
}
<div class="images-container">
      <img id="imgFood1" src="https://i.imgur.com/30XsebB.jpg" alt="cat" height="150" width="150"/>
      <img id="imgFood2" src="https://i.imgur.com/30XsebB.jpg" alt="cat" height="150" width="150"/>
      <img id="imgFood3" src="https://i.imgur.com/30XsebB.jpg" alt="cat" height="150" width="150"/>
      <img id="imgFood4" src="https://i.imgur.com/30XsebB.jpg" alt="cat" height="150" width="150"/>
 </div>
 <button id="myButton" type="button" class="btn btn-default" data-dismiss="modal">Scroll</button>
...