悬停以连续滚动水平div

Question

我正在开发一个水平图像轮播，我希望它在悬停在它上面时连续滚动，并在将鼠标移出它时停止。 JS代码使用悬停事件来检测鼠标的位置，并相应地向左或向右滚动。但是，我不能让它工作，所以任何帮助都会受到赞赏。

提前致谢

JS：

$('.carousel-frame ul').on('hover', function(e) {
  var container = $(this).parent();
  if ((e.pageX - this.offsetLeft) < container.width() / 2) {
    var direction = function() {
      container.stop().animate({
        scrollLeft: '-=600'
      }, 1000, 'linear', direction);
    }
    container.stop().animate({
      scrollLeft: '-=600'
    }, 1000, 'linear', direction);
  } else {
    var direction = function() {
      container.stop().animate({
        scrollLeft: '+=600'
      }, 1000, 'linear', direction);
    }
    container.stop().animate({
      scrollLeft: '+=600'
    }, 1000, 'linear', direction);
  }
}, function() {
    var container = $(this).parent();
    container.stop();
});

CSS：

.carousel-frame {
  width: 100%;
  margin-bottom: 0.5em;
  padding-bottom: 1em;
  position: relative;
  overflow-x: scroll;
  white-space: nowrap;
}
.carousel-frame ul {
  margin: 0;
  padding: 0;
  height: 100%;
  list-style: none;
}
.carousel-frame li.carousel-item {
  cursor: pointer;
  display: inline-block;
  margin: 0 5px 0 0;
  padding: 0;
}

HTML：

<div class="carousel-frame">
  <ul>
    <li class="carousel-item">
      <img src="http://placehold.it/200x150" />
    </li>
    <li class="carousel-item">
      <img src="http://placehold.it/200x150" />
    </li>
    <li class="carousel-item">
      <img src="http://placehold.it/200x150" />
    </li>
    <li class="carousel-item">
      <img src="http://placehold.it/200x150" />
    </li>
    <li class="carousel-item">
      <img src="http://placehold.it/200x150" />
    </li>
  </ul>
</div>

FIDDLE：

https://jsfiddle.net/btLoenzf/1/

Answer 1

您好试试这个https://jsfiddle.net/sharmi1308/btLoenzf/2/

我用过这样的

$('.carousel-frame ul').hover(function(e) {...