主页 / 问题 / 868965
Accepted
ZELIBOBA
Asked:2020-08-15 19:35:19 +0000 UTC2020-08-15 19:35:19 +0000 UTC

非常简单的 js 滑块不起作用

  • 772

我有一个4张图片的滑块，每张占100%的块，当你点击next时，它向左移动100%，并出现一个新的。

var left = 0;
document.getElementById("next").onclick = sliderLeft;
function sliderLeft() {
  var polosa = document.getElementById("polosa");
  var max_lenght = document.querySelectorAll(".image");
  left = left - 100;
  if (left < max_lenght.length) {
    left = 0;
  }
  /*
   if (left <= -400) {
    left = 0;
  }
  */
  polosa.style.left = left + "%";
}
body{
 display: flex;
  flex-direction:column;
  align-items:center;
}
img {
  float: left;
  width: 20%;
}
#slider {
  border: 3px solid black;
  overflow: hidden;
  max-width: 600px;
}

.arrows {
  margin-top: 60px;
}
#polosa {
  position: relative;
  display: inherit;
  transition: 1s ease;
  left: 0;
  width: 500%;
}
<div id="slider">
  <div id="polosa">
  <img class="image" src="https://images.unsplash.com/photo-1534106474077-f9e9c6f5a47c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=93e4a52103a10a38beffb1c30bed41ba&auto=format&fit=crop&w=500&q=60" alt="">
 <img class="image" src="https://images.unsplash.com/photo-1534076355207-1717511180ba?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dac3b914c452ddd9c6c51e1828ac0a76&auto=format&fit=crop&w=500&q=60" alt="">
 <img class="image" src="https://images.unsplash.com/photo-1534083264897-aeabfc7daf8a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d40d4da633c570324291ec2e6e5bd4f5&auto=format&fit=crop&w=500&q=60" alt="">
<img class="image" src="https://images.unsplash.com/photo-1534083152091-df439a43a2b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3bf58d027c1a0fbd9b92cd1de830438f&auto=format&fit=crop&w=500&q=60" alt="">
    </div>
</div>
<div class="arrows">
  <button id="prev">prev</button>
  <button id="next">next</button>
</div>

一般来说，一开始，当我滚动浏览所有图片时，我做了一个简单的检查if (left<= -400){left=0}，它一直悬停在第一张图片上。但是假设每次添加图片时，我都不想更改代码中的数字每次（从 400 到 500，从 500 到 600 等.d.）我都试图创建一个变量，所有图片都将在其中，并在检查中注册变量 .lenghtif (left < max_lenght.length) { left = 0; } 但它对我不起作用。

javascript

1 个回答

  1. Best Answer

    您最初将左侧的像素数与 -400 进行比较，但最终出于某种原因您开始比较左侧的图像数。修正版：

    var left = 0;
document.getElementById("next").onclick = sliderLeft;
function sliderLeft() {
  var polosa = document.getElementById("polosa");
  var max_lenght = document.querySelectorAll(".image");
  left = left - 100;
  if (left <= (max_lenght.length*-100)) {
    left = 0;
  }
  /*
   if (left <= -400) {
    left = 0;
  }
  */
  polosa.style.left = left + "%";
}
    body{
 display: flex;
  flex-direction:column;
  align-items:center;
}
img {
  float: left;
  width: 20%;
}
#slider {
  border: 3px solid black;
  overflow: hidden;
  max-width: 600px;
}

.arrows {
  margin-top: 60px;
}
#polosa {
  position: relative;
  display: inherit;
  transition: 1s ease;
  left: 0;
  width: 500%;
}
    <div id="slider">
  <div id="polosa">
  <img class="image" src="https://images.unsplash.com/photo-1534106474077-f9e9c6f5a47c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=93e4a52103a10a38beffb1c30bed41ba&auto=format&fit=crop&w=500&q=60" alt="">
 <img class="image" src="https://images.unsplash.com/photo-1534076355207-1717511180ba?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dac3b914c452ddd9c6c51e1828ac0a76&auto=format&fit=crop&w=500&q=60" alt="">
 <img class="image" src="https://images.unsplash.com/photo-1534083264897-aeabfc7daf8a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d40d4da633c570324291ec2e6e5bd4f5&auto=format&fit=crop&w=500&q=60" alt="">
<img class="image" src="https://images.unsplash.com/photo-1534083152091-df439a43a2b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3bf58d027c1a0fbd9b92cd1de830438f&auto=format&fit=crop&w=500&q=60" alt="">
    </div>
</div>
<div class="arrows">
  <button id="prev">prev</button>
  <button id="next">next</button>
</div>

    • 3

相关问题