javascript - jQuery 中的图像 slider ，实际幻灯片作为下一个/上一个触发器

Question

我是一名设计师，对 jQuery 知之甚少。但我喜欢学习 :) 所以我决定自己做下面的事情，但我不能完全让它工作。

我的想法是使用带有实际幻灯片的 slider 作为下一个/上一个按钮。所以我可以通过单击实际的下一张幻灯片转到下一张幻灯片 - 与上一张幻灯片相同。我猜下面的图片说明了我的意思。

Desired effect

我试过这样做:

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

当我点击 .next 时，我改变了类 .main > .prev, .next > .main, .next +1 > .next。

现在我可以更上一层楼了，而且效果很好，类也改变了，效果很好。但是当我单击 now-.next 类时，jQuery 似乎现在不识别它是 .next 并且响应它，就好像它仍然是 .main 类一样。更新后的类没有响应(现在的 .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%'});
});

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

非常感谢!

干杯!

Answer 1

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

首先，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đɍɨɇƶ 所说，您需要一些额外的代码来处理最后和第一个元素的点击。但这取决于你想要什么，我认为它不在问题的范围内。