Question

我需要一些帮助来创建JS，该JS将自动滚动到图像的右侧（图像高度为100％，窗口大小为手机大小）。当到达图像末尾时，它应该停止。第二部分是，当我单击箭头（以显示另一幅图像）时，它应该与第二幅图像执行相同的动画。

到目前为止，我有这个：

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>

    <div class="slideshow-container">
      <div class="mySlides1 fade">
        <div class="numbertext">1 / 6</div>
        <img src="http://www.wallpaperez.org/wallpaper/games/Teenage-Mutant-Ninja-Turtles-Mutants-in-Manhattan-2622.jpg" class="img" onload="this.style.marginLeft = '-500px';">
      </div>

      <div class="mySlides1 fade">
        <div class="numbertext">2 / 6</div>
        <img src="http://www.wallpaperez.org/wallpaper/games/Teenage-Mutant-Ninja-Turtles-Mutants-in-Manhattan-2622.jpg" class="img" onload="this.style.marginLeft = '-600px';">
        <div class="text">Caption Two</div>
      </div>

      <div class="mySlides1 fade">
        <div class="numbertext">3 / 6</div>
        <img src="http://www.wallpaperez.org/wallpaper/games/Teenage-Mutant-Ninja-Turtles-Mutants-in-Manhattan-2622.jpg" class="img" onload="this.style.marginLeft = '-600px';">
        <div class="text">Caption Three</div>
      </div>

      <div class="mySlides1 fade">
        <div class="numbertext">4 / 6</div>
        <img src="http://www.wallpaperez.org/wallpaper/games/Teenage-Mutant-Ninja-Turtles-Mutants-in-Manhattan-2622.jpg" class="img" onload="this.style.marginLeft = '-600px';">
        <div class="text">Caption four</div>
      </div>

      <div class="mySlides1 fade">
        <div class="numbertext">5 / 6</div>
        <img src="http://www.wallpaperez.org/wallpaper/games/Teenage-Mutant-Ninja-Turtles-Mutants-in-Manhattan-2622.jpg" class="img" onload="this.style.marginLeft = '-600px';">
        <div class="text">Caption four</div>
      </div>

      <div class="mySlides1 fade">
        <div class="numbertext">6 / 6</div>
        <img src="http://www.wallpaperez.org/wallpaper/games/Teenage-Mutant-Ninja-Turtles-Mutants-in-Manhattan-2622.jpg" class="img" onload="this.style.marginLeft = '-600px';">
        <div class="text">Caption four</div>
      </div>

      <a class="prev" onclick="plusDivs(-1, 0)">&#10094;</a>
      <a class="next" onclick="plusDivs(1, 0)">&#10095;</a>

    </div>


    <script>
      var slideIndex = [1,1,1];
      var slideId = ["mySlides1","mySlides2", "mySlides3"];
      showDivs(1, 0); /*showDivs(1, 1); showDivs(1, 2);*/

      function plusDivs(n, no) {
        showDivs(slideIndex[no] += n, no);
      }
      function showDivs(n, no) {
        var i;   var x = document.getElementsByClassName(slideId[no]);
        if (n > x.length) {
          slideIndex[no] = 1
        }
        if (n < 1) {
          slideIndex[no] = x.length
        }
        for (i = 0; i < x.length; i++) {
          x[i].style.display = "none";
        }
        x[slideIndex[no]-1].style.display = "block";
      }
    </script>


  </body>
</html>

它的工作方式是确实将图像移到侧面，但移动幅度不正确。

只需确保CSS就是这样：

.slideshow-container {
  height:100%;
  overflow: hidden;
  width: 100%;
}


.img {
  height:100%;
  left: 0px;
  transition: all 5s ease-in-out;

 /* margin: 0px;*/
}

img {
  height:100%;
  left: 0px;
  transition: all 5s ease-in-out;

 /* margin: 0px;*/
}

.mySlides1 {
display:block;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

自动滚动到页面右侧（取决于图像的大小）

0 个答案: