jquery图像滑块：到达最后一张图片，必须点击“下一步”才能回到第一张

Question

我使用了 nivo 滑块和其他一些滑块。编辑这些不是问题。这次我尝试自己创建自己的简单滑块。我可以让图像彼此淡入/淡出，但是在最终图像之后 - 它淡出什么都没有，我需要弄清楚如何让它简单地重置为第一张图像。目前我只使用“下一个”，我确信一旦完成，我就能找出“上一个”按钮。

我尝试了一个 if 语句，但不能完全做到。我已将其简化为最低限度，以尝试使内容易于阅读。感谢任何帮助。

这是我所有的代码：

CSS：

p {margin: 0; padding: 0}

.slides{
width: 500px; height: 200px;
position: relative;
margin: 20px auto;
overflow: hidden;
}

.img1, .img2, .img3 {
width: 500px; height: 200px;
display: block;
position: relative;
float: left;
}

.img1 {background-image: url(img1.png)}
.img2 {background-image: url(img2.png)}
.img3 {background-image: url(img3.png)}

.title {
width: 480px; height: 30px;
color: white; font-size: 15px;
padding: 10px;
position: absolute; top: 0;
background: url(tbg.png) 0 0 repeat;
}

.description {
width: 480px; height: 30px;
color: white; font-size: 15px;
padding: 10px;
position: absolute; bottom: 0;
background: url(tbg.png) 0 0 repeat;
}

.prev, .next {
width: 50px; height: 50px;
position: absolute; z-index: 10;
top: 50px; display: block;
background: url(prevnext.png) 0 0 no-repeat;
border: none; cursor: pointer;
}

.active{top: 0; left: 0}


.prev {left: 20px}
.next {right: 20px; background-position: -50px 0}

#img:not(.active) {display:none}

jquery:

$(function() {
$('#next').click(function(event) {
    $('#slides .active').fadeOut('slow').removeClass('active')
    .next('#img').fadeIn('slow').addClass('active');

});
});

HTML：

<div id="slides" class="slides">
    <div id="img" class="img1 active">
        <div class="title"><p>This Is My Title</p></div>
        <div class="description"><p>This Is My Description</p></div>
    </div>
    <div id="img" class="img2">
        <div class="title"><p>This Is My Title</p></div>
        <div class="description"><p>This Is My Description</p></div>
    </div>
    <div id="img" class="img3">
        <div class="title"><p>This Is My Title</p></div>
        <div class="description"><p>This Is My Description</p></div>
    </div>
    <a id="prev" class="prev"></a>
    <a id="next" class="next"></a>
</div>

Answer 1

试试这个：

$('#next').click(function(event) {
    var active = $('#slides .active');
    active.fadeOut('slow').removeClass('active');
    if(active.next('#img').length != 0)
        active.next('#img').fadeIn('slow').addClass('active');
    else
        $('#slides #img:first').fadeIn('slow').addClass('active');
});