创建简单的幻灯片

Creating a simple slideshow

本文关键字：幻灯片 简单 创建      更新时间：2023-09-26

我正在尝试通过遍历 DOM 创建一个非常简单的幻灯片。目前，我可以找到第一张幻灯片，淡出，淡入下一张。但是，它只工作一次。

http://jsfiddle.net/tmyie/fEEu6/3/

$('.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 张幻灯片？我将其用作学习练习，因此任何帮助都会很棒。

只需浏览 .img 可见的位置即可。

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

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

我相信

，它不起作用，因为您使用的是"：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/

您可以像这样为img添加和删除活动类：

$('.img').first().addClass('active').siblings('.img').hide();
$('.next').click(function () {
    $(this).siblings('.slides').children('.active').fadeOut().removeClass('active').next().addClass('active').fadeIn();
});
相关文章：