另一个 HTML、CSS 和 JQuery 中的图片库

Question

我正在尝试使用HTML，CSS和JQuery制作另一个图像库。问题是，当我按下 R 按钮(代表 RIGHT)时，图片只移动那个时间，之后 R 按钮不起作用，除非您使用 L 按钮向左移动。我一直在尝试修复它，但我根本无法让它工作。我认为问题是.index()的值在我按下 R 按钮时不会增加，但我不知道如何解决它，因为我仍然是 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实际上并不指向幻灯片中的幻灯片，在此函数中，它指向您正在单击的"右"链接。只需尝试添加控制台.log这个并单击按钮：

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

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

因此，如果要使其可滑动，则需要指向实际的幻灯片索引：

现在请检查我添加到代码笔中的固定示例：

• 在这里，我发明了一个变量 indexCurrent 来保存当前幻灯片的索引，默认情况下它等于 0;
• 每次单击右按钮时，我们都会将索引增加到 1，然后翻译整个滑块容器;
• 如果我们点击左边的 btn 也是如此，但现在我们减少了一个索引;

我的例子不是很完美，但我希望它能帮助你。如果您有任何问题，请随时提出！