像滑块一样滚动 div答案

【问题标题】：Scroll Divs Just Like a Slider像滑块一样滚动 div
【发布时间】：2013-05-02 13:24:29
【问题描述】：

我有如下 3 个 div 和如下 3 个链接。

分区

<div id="div1">
   Div 1   
</div>

<div id="div2">
    Div 2 
</div>

<div id="div3">
    Div 3 
</div>

链接

<a id="link1" href="#">Link 1</a>
<a id="link2" href="#">Link 2</a>
<a id="link3" href="#">Link 2</a>

我想要做的是创建一个滑块。当我

点击链接 1 -> 显示 div 1

点击链接 2 -> 显示 div 2

点击链接 3 -> 显示 div 3

我还试图让它像滑块一样运行。在滑块中，它只有上一个和下一个链接，这里我有多个链接。对于每个链接，都会有一个相应的 div。

JsFiddle 链接是：http://jsfiddle.net/n4p4x/1/

你能告诉我哪里出错了吗？

【问题讨论】：

jquery UI > 手风琴？
你想用你的代码做这个吗？或者您可以在任何类型的滑块中实现您的代码

标签： javascript jquery html css slider

【解决方案1】：

我得到了这个检查下面的代码和小提琴http://jsfiddle.net/sarfarazdesigner/n4p4x/2/

它解决了你的问题吗？让我知道我已经按照我对你的问题的理解做了。

#main{
    position:relative;
    overflow:hidden;
    width:960px;
    margin:50px auto 0;
}
#main div{
    float:left;
    width:200px;
    height:200px;
    overflow:hidden;
}

html

<a id="link1" href="#">Link 1</a><br/>
<a id="link2" href="#">Link 2</a><br/>
<a id="link3" href="#">Link 2</a>

<br/><br/><br/>
<div id="main">
    <div id="div1">
        Div 1 - In feugiat cursus velit et accumsan. Morbi eu ligula ac libero vestibulum molestie eget in diam. Fusce quis urna sit amet metus accumsan consectetur a quis odio. Donec tempor hendrerit mauris at venenatis. Etiam eu nisi ligula, eu viverra eros. Pellentesque vehicula ultricies consectetur. Praesent vehicula libero sit amet nulla sollicitudin placerat. Praesent eu elit arcu. Nullam tincidunt tortor quis justo pharetra id dictum felis auctor. Integer dapibus luctus dictum. Morbi pellentesque sagittis faucibus. Phasellus placerat semper malesuada. Praesent pulvinar tristique urna, ut sollicitudin dui convallis mollis. Praesent cursus venenatis risus, nec adipiscing sapien rhoncus in.   
    </div>

    <div id="div2">
        Div 2 - In feugiat cursus velit et accumsan. Morbi eu ligula ac libero vestibulum molestie eget in diam. Fusce quis urna sit amet metus accumsan consectetur a quis odio. Donec tempor hendrerit mauris at venenatis. Etiam eu nisi ligula, eu viverra eros. Pellentesque vehicula ultricies consectetur. Praesent vehicula libero sit amet nulla sollicitudin placerat. Praesent eu elit arcu. Nullam tincidunt tortor quis justo pharetra id dictum felis auctor. Integer dapibus luctus dictum. Morbi pellentesque sagittis faucibus. Phasellus placerat semper malesuada. Praesent pulvinar tristique urna, ut sollicitudin dui convallis mollis. Praesent cursus venenatis risus, nec adipiscing sapien rhoncus in.   
    </div>

    <div id="div3">
        Div 3 - In feugiat cursus velit et accumsan. Morbi eu ligula ac libero vestibulum molestie eget in diam. Fusce quis urna sit amet metus accumsan consectetur a quis odio. Donec tempor hendrerit mauris at venenatis. Etiam eu nisi ligula, eu viverra eros. Pellentesque vehicula ultricies consectetur. Praesent vehicula libero sit amet nulla sollicitudin placerat. Praesent eu elit arcu. Nullam tincidunt tortor quis justo pharetra id dictum felis auctor. Integer dapibus luctus dictum. Morbi pellentesque sagittis faucibus. Phasellus placerat semper malesuada. Praesent pulvinar tristique urna, ut sollicitudin dui convallis mollis. Praesent cursus venenatis risus, nec adipiscing sapien rhoncus in.   
    </div>

</div>

【讨论】：

【解决方案2】：

你必须为你的 div 设置样式

 <div id="main">
      <div class="slice" id="slide_1"></div><div class="slice" id="slide_2"></div><div class="slice" id="slide_3"></div>

    </div>
    #main{
    position:relative;
}
    .slice{
    float:left;
    width:200px;
    height:200px;
    overflow:hidden;
    }

最重要的是：float:left;试试看

查看我自己的滚动条：http://dap.ntua.gr/el http://dap.ntua.gr/el/template/js/scroller.js

【讨论】：