非常简单的jQuery Div Slider [英] Very Simple jQuery Div Slider

问题描述

我想在页面上放置5个div，但是页面的宽度不允许我这样做.所以我想我只能显示其中的3个，想要看到其他人的人可以单击左右箭头查看.我希望它的工作方式非常简单.任何人都知道最好的方法吗?

I would like to put 5 divs on my page but width of the page doesn`t let me do it. So I thought I can show only 3 of them and people who wants to see other ones can click right-left arrows to see. I want it to work that way very simple. Anybody has an idea of the best way to do it ?

推荐答案

使用 jQuery.DIYslider ，一种轻巧且可自定义的jQuery滑块.

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

您会注意到，此插件使您可以轻松地执行任何您想做的事情.

You'll notice this plugin makes it extremely easy to do whatever you want to do.

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

You'll find all of this plugin's options, methods and events on the page linked above.

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

这篇关于非常简单的jQuery Div Slider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！