非常简单的jQuery Div Slider

Question

我想在我的页面上放5个div,但页面的宽度不允许我这样做.所以我认为我只能展示其中的3个,而想要看到其他人的人可以点击左右箭头来查看.我希望它以这种方式工作非常简单.有人知道最好的方法吗？

Answer 1

下面是如何使用jQuery.DIYslider,一个轻量级和可自定义的jQuery滑块.

演示以下代码:http://jsfiddle.net/bj4yZ/155/

您会注意到这个插件可以让您轻松做任何您想做的事情.

您将在上面链接的页面上找到所有此插件的选项,方法和事件.

HTML

<button id="go-left">&laquo;</button> <button id="go-right">&raquo;</button>

<div class="slider"><!-- The slider -->
    <div><!-- A mandatory div used by the slider -->
        <!-- Each div below is considered a slide -->
        <div class="a">Div #1</div>
        <div class="b">Div #2</div>
        <div class="c">Div #3</div>
        <div class="d">Div #4</div>
        <div class="e">Div #5</div>
    </div>
</div>

JavaScript的

$(".slider").diyslider({
    width: "400px", // width of the slider
    height: "200px", // height of the slider
    display: 3, // number of slides you want it to display at once
    loop: false // disable looping on slides
}); // this is all you need!

// use buttons to change slide
$("#go-left").bind("click", function(){
    // Go to the previous slide
    $(".slider").diyslider("move", "back");
});
$("#go-right").bind("click", function(){
    // Go to the previous slide
    $(".slider").diyslider("move", "forth");
});