Question

我想在我的网站上为一些推荐制作一个简单的内容滑块。我不需要任何花哨的效果。我需要的是能够显示3个推荐，然后有箭头，你可以点击左右看到更多的推荐。

如何使用jquery实现此目的？

这就是我现在设置html的方式。

<div id="testimonial-rotator">
<div class="testimonial">Testimonial 1</div>
<div class="testimonial">Testimonial 2</div>
<div class="testimonial">Testimonial 3</div>
<div class="testimonial">Testimonial 4</div>
</div>

Answer 1

您可以将班级更改为ID

<button id="prev" disabled="disabled">Prev</button>
<button id="next">Next</button>
<hr /> 

<div id="testimonial-rotator">
    <div id="testimonial" class="first current">Testimonial 1</div>
    <div id="testimonial2">Testimonial 2</div>
    <div id="testimonial3">Testimonial 3</div>
    <div id="testimonial4" class="last">Testimonial 4</div>
</div>

的javascript

$('#next').click(function() {
    $('.current').removeClass('current').hide()
        .next().show().addClass('current');
    if ($('.current').hasClass('last')) {
        $('#next').attr('disabled', true);
    }
    $('#prev').attr('disabled', null);
});

$('#prev').click(function() {
    $('.current').removeClass('current').hide()
        .prev().show().addClass('current');
    if ($('.current').hasClass('first')) {
        $('#prev').attr('disabled', true);
    }
    $('#next').attr('disabled', null);
});

CSS

#testimonial2, #testimonial3, #testimonial4{
    display: none;
}

DEMO ：http://jsfiddle.net/ayiem999/u7Wcz/

使用jquery的超简单的从左到右的滑块

1 个答案: