jquery点击水平滚动

Question

我试图让页面的这个水平部分在单击向左或向右箭头时自动滚动。我可以让 Jquery 代码在控制台中正确运行。但是，自动滚动事件根本不会在我的页面上运行。谁能提供对这个问题的任何见解？

代码如下：

HTML

 <div class = "horizon horizon-prev">
      <img src = "../images/left-arrow.png" />
    </div>
    <div class = "horizon horizon-next">
      <img src = "../images/right-arrow.png" />
    </div>

  <div class="center" id="content">
      <div class=internal>
        div 1
      </div>
       <div class=internal>
        div 2
      </div>
       <div class=internal>
        div 3
      </div>
       <div class=internal>
        div 4
      </div>
       <div class=internal>
        div 5
      </div>
       <div class=internal>
        div 6
      </div>
       <div class=internal>
        div 7
      </div>
       <div class=internal>
        div 8
      </div>
    </div>

CSS

 div.center {
 width: 90%;
 height: 210px;
 border: 1px solid #000;
 margin: auto;
 overflow-x: hidden;
 overflow-y: hidden;
 white-space: nowrap;
  }
  div.internal {
   display: inline-block;
   vertical-align: middle;
   width: 100%;
   text-align: center;
  }

查询

$('.horizon-prev').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "-=775px"
  }, "slow");
});

 $('.horizon-next').click(function() {
  event.preventDefault();
  $('#content').animate({
   scrollLeft: "+=775px"
  }, "slow");
});

原文由 Seth Spivey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

（基于查看您的网站 sethspivey.com）

您需要添加正在使用的缺失事件参数，并将点击处理程序移动到 document.ready 中，如下所示：

 $(function() {
  $('.horizon-prev').click(function(event) {
    event.preventDefault();
    $('#content').animate({
      scrollLeft: "-=775px"
    }, "slow");
  });

   $('.horizon-next').click(function(event) {
    event.preventDefault();
    $('#content').animate({
     scrollLeft: "+=775px"
    }, "slow");
  });
});

原文由 libcthorne 发布，翻译遵循 CC BY-SA 3.0 许可协议