div desplazamiento horizontal usando botones

Question

¿Cómo puedo configurar los botones izquierdo y derecho en un DIV para desplazar el contenido horizontalmente? No necesito mostrar una barra de desplazamiento.

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> 

A continuación, el mismo con el botón izquierdo, salvo - marginLeft: + = "200px".

Answer 2

puedes probar esto: - crea una "máscara div" y establece la posición relativa, establece el ancho y desbordamiento oculto. - hacer un div de contenido dentro de la div máscara y posición establecida fijar

Ahora usted puede poner dos botones: izquierda y derecha, y hay que modifiy único valor izquierda de la div de contenido

similares como solución Parches :)

Answer 3

Aquí está el código que desea. Está demostrado que funciona en IE, Safari, Chrome, Firefox, etc.

Aquí está la parte 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> 

Aquí está jQuery parte en la función de 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()); 
      }); 
     } 
     } 

Para esconder las flechas por favor, mira aquí. Detect end of horizontal scrolling div with jQuery