我是一名设计师,对 jQuery 知之甚少。但我喜欢学习 :) 所以我决定自己做下面的事情,但我不能完全让它工作。
我的想法是使用带有实际幻灯片的 slider 作为下一个/上一个按钮。所以我可以通过单击实际的下一张幻灯片转到下一张幻灯片 - 与上一张幻灯片相同。我猜下面的图片说明了我的意思。
我试过这样做:
- 为主图像分配一个 .main 类
- 为左边部分隐藏的图像分配一个类.prev
- 为右侧部分隐藏的图像分配一个类 .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%'});
});
我想这对您来说是蹒跚学步的话题,但也许您可以帮助我让它发挥作用。你怎么会想到这件事?有什么想法吗?
非常感谢!
干杯!
最佳答案
这并不是真正的幼儿谈话,因为您需要注意一些陷阱。
首先,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đɍɨɇƶ 所说,您需要一些额外的代码来处理最后和第一个元素的点击。但这取决于你想要什么,我认为它不在问题的范围内。
关于javascript - jQuery 中的图像 slider ,实际幻灯片作为下一个/上一个触发器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33478265/