Scrol Divs就像一个滑块

的div

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

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

对LINK1点击 - >显示DIV 1

单击链接2 - >显示DIV 2

点击LINK3 - >显示DIV 3

而且我正在努力使其像滑块一样操作。在滑块中，它只有prev和next链接，在这里我有多个链接。对于每个链接都会有相应的div。

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

能否请你告诉我在哪里出了问题？

来源

2013-05-08 Techie

jQuery用户界面>手风琴？ – hjpotter92 2013-05-08 10:44:40

你想使用你的代码？或者你可以用任何类型的滑块来实现你的代码 – 2013-05-08 10:51:57

我得到这个检查这个下面的代码和小提琴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>

来源

2013-05-08 11:05:05

您必须风格你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; 
    }

最重要的是：浮动：左;试试吧

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

来源

2013-05-08 10:50:31

Scrol Divs就像一个滑块

回答

相关问题