Question

我是一名设计师，对jQuery只有一点点了解。但是我喜欢学习:)所以我决定自己做下面的事情，而且我无法让它发挥作用。

我的想法是将滑块与实际幻灯片作为下一个/上一个按钮。因此，我可以通过单击实际的下一张幻灯片转到下一张幻灯片 - 与上一张幻灯片相同。我想下面的图片显示了我的意思。

我试过这样做：

将一个类.main分配给主图像
将类.prev分配给左侧的部分隐藏图像
将一个类.next指定给右侧的部分隐藏图像

当我点击.next时，我改变了类.main＆gt; .prev，.next＆gt; .main，.next +1＆gt;的.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%'});
});

我想这是为你蹒跚学步的谈话，但也许你可以帮助我开始工作。你怎么会这件事？有什么想法吗？

非常感谢前方！

干杯！

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

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

1 个答案: