Przewijanie w poziomie za pomocą przycisków

Question

Jak ustawić lewy i prawy przycisk na DIV, aby przewijać zawartość w poziomie? Nie muszę wyświetlać paska przewijania.

HMTL:

<div id="browser"> 
    <a href="#" id="left-button"><img src="left-button.jpg" /></a> 
    <img src="thumb_1.jpg" /> 
    <img src="thumb_2.jpg" /> 
    <img src="thumb_3.jpg" /> 
    <img src="thumb_4.jpg" /> 
    <img src="thumb_5.jpg" /> 
    <img src="thumb_6.jpg" /> 
    <a href="#" id="right-button"><img src="right-button.jpg" /></a> 
</div> 

CSS:

#browser { float: left; width: 200px; overflow: hidden; white-space: nowrap; } 

Answer 1

Do:

<div id="browser"> 
    <a href="#" id="left-button"><img src="left-button.jpg" /></a> 
    <div id="content"> 
     <img src="thumb_1.jpg" /> 
     <img src="thumb_2.jpg" /> 
     <img src="thumb_3.jpg" /> 
     <img src="thumb_4.jpg" /> 
     <img src="thumb_5.jpg" /> 
     <img src="thumb_6.jpg" /> 
    </div> 
    <a href="#" id="right-button"><img src="right-button.jpg" /></a> 
</div> 

<script> 
    $('#right-button').click(function() { 
     event.preventDefault(); 
     $('#content').animate({ 
     marginLeft: "-=200px" 
     }, "fast"); 
    }); 
</script> 

Potem to samo dla lewego przycisku, z wyjątkiem - marginLeft: + = "200px".

Answer 2

możesz spróbować tego: - zrób "div maski" i ustaw położenie względne, ustaw szerokość i przepełnienie ukryte. - uczynić div zawartość wewnątrz div maski i ustawić położenie naprawić

Teraz można umieścić dwa przycisk: lewa i prawa, i trzeba modifiy Opuściliśmy wartość zawartości div za

Podobnie jak rozwiązania Patches :)

Answer 3

Oto kod, który chcesz. Udowodniono, że działa na IE, Safari, Chrome, Firefox itp.

Oto część HTML.

<div id="slide-wrap" style="width:1000px; height:200px; overflow:hidden; padding:0 auto;"> 
     <div id="inner-wrap" style="float:left;"> 
      <!-- 'Put Inline contains here like below.' --> 
      <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div> 
      <!-- ... --> 
      <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div> 
      <!-- 'Put Inline contains here like above.' --> 
     </div> 
     <div style="display: block; width:40px; height:60px; position: absolute; margin-left:0px; margin-top:40px"> 
      <img id='scroll_L_Arrow' src='../assets/img/l-arrow.png' onclick="scrollThumb('Go_L')"/> 
     </div> 
     <div style="display: block; width:40px; height:60px; position: absolute; margin-left:960px; margin-top:40px"> 
      <img id='scroll_R_Arrow' src='../assets/img/r-arrow.png' onclick="scrollThumb('Go_R')"/> 
     </div> 
    </div> 

Oto część jQuery w funkcji JavaScript.

 function scrollThumb(direction) { 
     if (direction=='Go_L') { 
      $('#slide-wrap').animate({ 
       scrollLeft: "-=" + 250 + "px" 
      }, function(){ 
       // createCookie('scrollPos', $('#slide-wrap').scrollLeft()); 
      }); 
     }else 
     if (direction=='Go_R') { 
      $('#slide-wrap').animate({ 
       scrollLeft: "+=" + 250 + "px" 
      }, function(){ 
       // createCookie('scrollPos', $('#slide-wrap').scrollLeft()); 
      }); 
     } 
     } 

za ukrywanie strzałek zadawalają patrząc tutaj. Detect end of horizontal scrolling div with jQuery