Scrol Divs Just Like a Slider

Question

У меня есть 3 divs, как показано ниже, и 3 ссылки, как показано ниже.

Divs

<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

нажмите на LINK2 -> показать DIV 2

нажмите на LINK3 -> показать DIV 3

Также я пытаюсь чтобы он работал как слайдер. В слайдере есть только предыдущие и следующие ссылки, где у меня есть несколько ссылок. Для каждой ссылки будет соответствующий div.

JsFiddle ссылки является: http://jsfiddle.net/n4p4x/1/

Можете ли вы сказать мне, где я пошло не так?

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

Answer 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; 
    } 

Самое главное: поплавок: левый; попробуйте это

проверить мою собственную скроллер: http://dap.ntua.gr/el http://dap.ntua.gr/el/template/js/scroller.js