jquery - 另一个 HTML、CSS 和 JQuery 图像库

Question

我正在尝试使用 HTML、CSS 和 JQuery 制作另一个图片库。问题是，当我按下 R 按钮(代表 RIGHT)时，图片仅移动一次，之后 R 按钮将不起作用，除非您使用 L 按钮向左移动。我一直在尝试修复它，但我就是无法让它工作。我认为问题是当我按下 R 按钮时 .index() 的值不会增加，但我不知道如何修复它，因为我对 JQuery 还很陌生。另外，如果您在除前两张图片之外的任何图片上按 R 按钮，R 按钮会将您带到第二张图片。

这是代码:

$(document).ready(function() { 
     $('#slide1_controls').on('click', 'span', function(){
         $("#slide1_images").css("transform","translateX("+$(this).index() * -600+"px)");
         $("#slide1_controls span").removeClass("selected");
         $(this).addClass("selected");
     });
 }); 
$(document).ready(function() { 
     $('#right').click(function(){
         $("#slide1_images").css("transform","translateX("+ $(this).index() * -600+"px)");
         
     });
});

$(document).ready(function() { 
     $('#left').click(function(){
         $("#slide1_images").css("transform","translateX("+$(this).index() * 600+"px)");
     });
});

#slide1_container {
  width: 600px;
  height: auto;
  overflow: hidden;
  margin: 0 auto;
}
#slide1_images {
  width: 3000px; /* (width * image number) */
  -webkit-transition: all 1.0s ease-in-out;
  -moz-transition: all 1.0s ease-in-out;
  -o-transition: all 1.0s ease-in-out;
  transition: all 1.0s ease-in-out;
}
#slide1_images img {
  padding: 0;
  margin: 0;
  float: left;
}
#slide1_controls {
  margin-left: 12%;
}
span img {
  width: 17%;
  height: auto;
  display: inline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slide1_container" class="shadow">
        <div id="slide1_images">
          <img class="img" src="https://www.w3schools.com/howto/img_nature.jpg">
          <img class="img" src="https://www.w3schools.com/howto/img_snow.jpg">
          <img class="img" src="https://www.w3schools.com/howto/img_mountains.jpg">
          <img class="img" src="https://www.w3schools.com/howto/img_nature.jpg">
          <img class="img" src="https://www.w3schools.com/howto/img_snow.jpg">
        </div>
      </div>
      <p id="slide1_controls">
        <span class="selected">
            <img src="https://www.w3schools.com/howto/img_nature.jpg">
        </span> 
        <span>
            <img src="https://www.w3schools.com/howto/img_snow.jpg">
        </span> 
        <span>
            <img src="https://www.w3schools.com/howto/img_mountains.jpg">
        </span> 
        <span>
            <img src="https://www.w3schools.com/howto/img_nature.jpg">
        </span> 
        <span>
            <img src="https://www.w3schools.com/howto/img_snow.jpg">
        </span>
      </p>
      <p>
        <a  id="left">L</a> | <a id="right">R</a>
      </p>

Answer 1

看，问题就在这里:

$(document).ready(function() { 
     $('#right').click(function(){
         $("#slide1_images").css("transform","translateX("+ $(this).index() * -600+"px)");

     });
});

您想要用来指向当前元素索引的this实际上并不指向幻灯片中的幻灯片，在此函数中它指向您的“右侧”链接正在点击。只需尝试添加 console.log this 并单击按钮:

$(document).ready(function() { 
     $('#right').click(function(){
         $("#slide1_images").css("transform","translateX("+ $(this).index() * -600+"px)");

       console.log(this);

     });
});

这在 JS 中有点棘手，是的 =)

所以如果你想让它可滑动，你需要指向实际的幻灯片索引:

现在请检查fixed example I've added to the Codepen :

• 这里我发明了一个变量indexCurrent来保存当前幻灯片的索引，默认情况下它等于0；
• 每次单击右侧按钮时，我们都会将索引增加到 1，并平移整个 slider 容器；
• 如果我们单击左侧按钮，情况也是如此，但现在我们减少索引；

我的例子并不完美，但希望对你有帮助。如果您有任何疑问，请随时提问!