jQuery中的图像滑块，实际幻灯片作为next/prev触发器

Image slider in jQuery with actual slides as next/prev triggers

本文关键字：幻灯片 next 触发器 prev 图像 jQuery      更新时间：2023-09-26

我是一名设计师，对jQuery只有一点了解。但我喜欢学习：）所以我决定自己做下面的事情，但我无法完全做到。

我的想法是有一个滑块和实际的幻灯片作为下一个/上一个按钮。因此，我可以通过单击实际的下一张幻灯片转到下一张，上一张幻灯片也是如此。我想下面的图片说明了我的意思。

预期效果

我试过这样做：

  1. 为主图像分配一个class.main
  2. 为左侧部分隐藏的图像分配一个类.prev
  3. 分配一个类。在右侧部分隐藏的图像旁边

当我点击.next时，我会更改类.main.prev、.next>.main、.next+1>.next.

现在我可以做一步了，它很有效，类也变了，它也很好。但是，当我单击now-.next类时，jQuery似乎没有识别出它是.next，并对它进行响应，就好像它仍然是.main类一样。更新后的类没有响应（now-main类仍然像.next一样工作，就好像jQuery没有读取更改一样）。

这是HTML:

<div class="view">
    <ul>
        <li class="left" data-id="1"></li>
        <li class="main" data-id="2"></li>
        <li class="right" data-id="3"></li>
        <li data-id="4"></li>
        <li data-id="5"></li>
    </ul>
</div>

脚本：

$(".next").click(function(){
    $(this).prev().removeClass("main").addClass("prev");
    $(this).removeClass("next").addClass("main");
    $(this).next().addClass("next");
    $(".view ul li:first").animate({marginLeft: '-=57%'});
    $(".view ul li.main").animate({marginLeft: '-=15%'});
});

我想这对你来说是蹒跚学步的话，但也许你可以帮我把它发挥作用。你怎么会想到这件事？有什么想法吗？

非常感谢！

干杯！

这并不是真正的幼儿谈话，因为你需要注意一些陷阱。

首先，click处理程序不会以这种方式为新的.next工作。你需要使用

$('body').on('click', 'li.next', function() {

而是使其适用于动态内容
另一个问题是您忘记删除.prev类

$(".prev").removeClass("prev");

另一个小错误是：$(".view ul li:first").animate({marginLeft: '-=57%'});总是取第一个元素，但在第一张幻灯片之后，它应该取.prev。（因此将其更改为li.prev）。顺便说一句，我想你用的是class="prev"而不是left（有问题的打字错误）。

请参阅此处的完整代码：http://jsfiddle.net/a8Lf9r68/3/

正如@MōIɍɨɇƶ所说，您需要一些额外的代码来处理最后一次和第一次元素点击。但这取决于你想要什么，我认为这超出了问题的范围。

相关文章：