Javascript 滚动div就像滑动条一样

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

Divs

第一组
第2组
第3组

链接

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

单击link1->showdiv1

单击link2->showdiv2

单击链接3->show div 3

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

JSIDLE链接是：

---

你能告诉我哪里出了问题吗？

你必须设计你的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;
    }

#主要{
位置：相对位置；
}
.切片{
浮动：左；
宽度：200px；
高度：200px；
溢出：隐藏；
}

最重要的是：浮动：左；试试看

查看我自己的滚动条：

---

我收到了下面的代码和 拨弄

解决你的问题是什么？ 让我知道 我是根据你的问题所了解的情况做的

#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>

第1部分-在封建社会中。Morbi eu ligula ac libero前庭分子直径。我们必须坐在这里，继续前进。Donec Temporal hendrerit mauris在venenatis。Etiam eu nisi ligula，eu viverra eros。佩伦特斯克乌尔蒂连续交通工具。自由的交通工具坐在原地。欧盟精英协会。这是一个猫的名言拍卖人。整型白背飞虱。Morbi pellentesque sagittis faucibus。马来苏达河鼠。在乌尔纳省的普尔文纳省，这是一个令人难以置信的城市。这是一个很好的例子，nec将智者罗恩库斯（sapien rhoncus）引入了这一领域。
第2部分-在封建社会中。Morbi eu ligula ac libero前庭分子直径。我们必须坐在这里，继续前进。Donec Temporal hendrerit mauris在venenatis。Etiam eu nisi ligula，eu viverra eros。佩伦特斯克乌尔蒂连续交通工具。自由的交通工具坐在原地。欧盟精英协会。这是一个猫的名言拍卖人。整型白背飞虱。Morbi pellentesque sagittis faucibus。马来苏达河鼠。在乌尔纳省的普尔文纳省，这是一个令人难以置信的城市。这是一个很好的例子，nec将智者罗恩库斯（sapien rhoncus）引入了这一领域。
第3部分-在封建社会中。Morbi eu ligula ac libero前庭分子直径。我们必须坐在这里，继续前进。Donec Temporal hendrerit mauris在venenatis。Etiam eu nisi ligula，eu viverra eros。佩伦特斯克乌尔蒂连续交通工具。自由的交通工具坐在原地。欧盟精英协会。这是一个猫的名言拍卖人。整型白背飞虱。Morbi pellentesque sagittis faucibus。马来苏达河鼠。在乌尔纳省的普尔文纳省，这是一个令人难以置信的城市。这是一个很好的例子，nec将智者罗恩库斯（sapien rhoncus）引入了这一领域。

jquery UI>Accordion？您想用您的代码实现吗？或者，您可以在任何类型的滑块中实现代码

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

<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>