使用按钮的水平滚动div

如何在DIV上设置左右按钮以水平滚动内容？我不需要显示滚动条。使用按钮的水平滚动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; }

来源

2011-12-19 GSTAR

务必：

<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：+ = “200像素”。

来源

2011-12-19 12:39:02 Patches

干杯队友，那工作:) – GSTAR 2011-12-19 12:57:59

@GSTAR寻找类似的东西。你是如何让所有图像保持水平排列的？矿换行到下一行。 – Rob 2012-11-02 15:19:51

'white-space：nowrap' – Si8 2016-06-10 18:10:06

-1

你可以试试这个： - 制作一个“mask div”并设置相对位置，设置宽度和溢出隐藏。 - 使面膜的div内的内容股利和设置位置固定

现在你可以放两个按钮：左，右，你需要modifiy只有内容div的左值

补丁程序解决类似:)

来源

2011-12-19 12:47:15 Briganti

这是您想要的代码。经证实，适用于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>

这里是jQuery在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()); 
      }); 
     } 
     }

对于隐藏箭头请看这里。 Detect end of horizontal scrolling div with jQuery

来源

2013-02-20 17:19:42 NOTSermsak

使用按钮的水平滚动div

回答

相关问题