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');
});

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

1 个答案: