Question

我试图通过遍历DOM来创建一个非常简单的幻灯片。此刻，我可以找到第一张幻灯片，淡出淡出，然后淡入淡出。但是，它只能一次。

$('.img').first().siblings('.img').hide();
$('.next').click(function () {
    $(this).siblings('.slides').children('.img:first-child').fadeOut().next().fadeIn();

});

<div class="container">
    <div class="slides">
        <div class="img">1</div>
        <div class="img">2</div>
        <div class="img">3</div>
    </div>
    <div class="next">&rarr;</div>
</div>

有谁知道为什么它只适用于一张幻灯片，而不是直到所有3张？我正在使用它作为学习练习，所以任何帮助都会很棒。

Answer 1

只需浏览.img即可。

$('.next').click(function(){
   $(this).closest('.container').find('.slides > .img:visible').hide().next().fadeIn();
});

如果你想回去，只需我们.prev（）而不是.next（）

Answer 2

我相信，它不起作用，因为你正在使用“：First-child”

$(this).siblings('.slides').children('.img:first-child').fadeOut().next().fadeIn();

使用此代码，它将始终淡出第一个孩子并淡化下一个孩子。但是，在第一次移动后，第一个孩子已经隐藏，第二个孩子已经显示，你不会看到任何差异。

可以尝试添加虚拟课程

的jQuery

if( $(this).siblings('.slides').children('.img.dummyClass').next().length  )
    $(this).siblings('.slides').children('.img.dummyClass').fadeOut().removeClass('dummyClass').next().fadeIn().addClass('dummyClass');

HTML

<div class="container">
<div class="slides">
    <div class="img dummyClass">1</div>
    <div class="img">2</div>
    <div class="img">3</div>
    <div class="img">4</div>
</div>
<div class="next">&rarr;</div>

注意：这不会滑过最后一张幻灯片（因为IF条件）。但由于这不是你问题的一部分，我忽略了回到幻灯片1。

已添加

http://jsfiddle.net/9GZJm/1/

Answer 3

你可以像这样添加和删除img的活动类：

$('.img').first().addClass('active').siblings('.img').hide();
$('.next').click(function () {
    $(this).siblings('.slides').children('.active').fadeOut().removeClass('active').next().addClass('active').fadeIn();

});

创建一个简单的幻灯片

3 个答案: