使用按钮的水平滚动 div答案

【问题标题】：Horizontal scrolling div using buttons使用按钮的水平滚动 div
【发布时间】：2011-12-19 12:08:26
【问题描述】：

如何在 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; }

【问题讨论】：

标签： jquery

【解决方案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"。

【讨论】：

@GSTAR 寻找类似的东西。您是如何让所有图像保持在水平行中的？我的换行到下一行。
white-space: nowrap

【解决方案2】：

这是您想要的代码。已证明可在 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

【讨论】：

首先我使用了批准答案中的代码，但在我的情况下，更改边距真的很奇怪......感谢这个 scrollLeft！

【解决方案3】：

你可以试试这个： - 制作一个“掩码 div”并设置相对位置、设置宽度和溢出隐藏。 - 在掩码 div 内创建一个内容 div 并设置位置修复

现在可以放左右两个按钮，只需要修改内容div的left值

类似于补丁解决方案:)

【讨论】：