我制作了一个非常简单的幻灯片。单击箭头将使$(this)
淡出,下一张幻灯片将使用next()
函数fadeIn()
。
但是,我似乎无法扭转这一局面。 prev()
和 next()
似乎没有循环回 DOM,它们只是返回到树上。这是代码和 jsfiddle:
$('li').first().siblings().hide();
$('.next').click(function () {
$(this)
.parent('body')
.find('li:first-child')
.fadeOut(function () {
$(this)
.next()
.fadeIn()
$(this)
.appendTo('ul')
});
});
最佳答案
一个快速简单的解决方案是仅使用 active
类来跟踪当前事件的 li
,这使您的 JS 更加简单。您可以进一步简化它,并将两个点击处理程序放入一个函数中,但为了简单起见,我保留了这种方式。
fiddle :http://jsfiddle.net/Yqqbv/
$('li').first().siblings().hide();
$('li').first().addClass('active');
$('.next').click(function () {
var $active = $('li.active');
$active.hide();
$active.next().fadeIn().addClass('active');
$active.removeClass('active');
});
$('.back').click(function () {
var $active = $('li.active');
$active.hide();
$active.prev().fadeIn().addClass('active');
$active.removeClass('active');
});
关于jquery - 向后循环 div — jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17935515/