ボタンを使用した水平スクロールdiv

Question

コンテンツを水平方向にスクロールするには、DIVに左右のボタンを設定するにはどうすればよいですか？私はスクロールバーを表示する必要はありません。

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

の操作を行います。その後

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

除いて、左ボタンで同じ - marginLeft：+ = "200pxの"。

Answer 2

これを試すことができます： - "マスクdiv"を作成し、相対的な位置を設定し、幅を設定し、隠れてしまいます。 は - 今、あなたは2つのボタンを置くことができ、コンテンツのマスクのdivの内側のdivと設定された位置が

を修正します：左と右、あなたはパッチソリューションと同様にのみコンテンツのdivの左値

をmodifiyする必要があります:)

Answer 3

ここに、必要なコードがあります。 IE、Safari、Chrome、Firefoxなどで動作することが証明されています

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

JavaScript関数のjQueryの部分です。

 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()); 
      }); 
     } 
     } 

ここを見てください。 Detect end of horizontal scrolling div with jQuery