Question

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

Answer 1

以下是使用jQuery.DIYslider，轻量级和可自定义的jQuery滑块的方法。

以下代码的

你会注意到这个插件可以很容易地做任何你想做的事情。

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

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

Answer 2

对你来说编码并不难，所以理论就像这样

html结构

.outter-container
  .inner container
    .slide slide1
    .slide slide2
    .slide slide3
    .slide slide4
    .slide slideX

获取窗口宽度，滑动宽度
窗口宽度/ 3 =滑动宽度（使其更容易，一次总是3张幻灯片）
索引每个幻灯片，而不是应用索引*幻灯片宽度（这等于水平位置）
将outter容器设置为相对位置，width = window width，overflow = hidden，将内部容器设置为absolute，left：0，top：0并滑动到position：absolute
设置每个幻灯片css left：index * width（point 3）
你去，成功隐藏其他幻灯片，交流时间
next.click - ＆gt;向左滑动内部容器： - = slide.width（与left.click相反）
并显示/隐藏左/右按钮，如果内部容器被留下= 0其他....禁用人们在不再隐藏幻灯片时点击

非常简单的jQuery Div Slider

2 个答案: