悬停在箭头上时左右滚动

Question

所以当有人将鼠标悬停在箭头上时，我试图简单地左右滚动。我分叉了另一个 JSFiddle 并从我正在尝试执行此操作的网站上复制了 html/css。这是：https://jsfiddle.net/31hf4e0h/

现在，当您将鼠标悬停在任一箭头上时，它一直向右滚动，但我希望#before 箭头使其向左滚动。是否有捷径可寻？或者一般更简单的方法可以达到这种效果？

代码如下：

$(function() {
var $container = $('#object-nav ul'),
    scroll = $container.width();
$('#after').hover(function() {
    $container.animate({
        'scrollLeft': scroll
    },{duration: 2000, queue: false});
}, function(){
    $container.stop();
});
$('#before').hover(function() {
    $container.animate({
        'scrollLeft': scroll
    },{duration: 2000, queue: false});
}, function(){
    $container.stop();
});

});

谢谢！

Answer 1

如果要向右滚动，还是要用'scrollLeft'，但是可以通过指定像素数来向右滚动。

尝试这样的事情：

$('#before').hover(function() {
        $container.animate({
            'scrollLeft': -100
        },{duration: 2000, queue: false});
      }

Answer 2

这是悬停左右滚动的完美解决方案。 jsfiddle

function loopNext(){
    $('#sliderWrapper').stop().animate({scrollLeft:'+=20'}, 'fast', 'linear', loopNext);
}

function loopPrev(){
    $('#sliderWrapper').stop().animate({scrollLeft:'-=20'}, 'fast', 'linear', loopPrev);
}

function stop(){
    $('#sliderWrapper').stop();
}


$('#next').hover(function () {
   loopNext();
},function () {
   stop();
});

$('#prev').hover(function () {
   loopPrev();
},function () {
   stop();
});

#sliderWrapper {
    left: 40px;
    width: calc(100% - 80px);
    white-space: nowrap !important;
    height: 100%;
    position: relative;
    background: #999;
    overflow-x: hidden;
}
img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#next {
    height: 100%;
    position: absolute;
    right: 0;
    background: #555;
    z-index: 1;
}
#prev {
    height: 100%;
    position: absolute;
    left: 0;
    background: #555;
    z-index: 1;
}
#imageSlider {
    width: 100%;
    height: 150px;
    position: relative;
    overflow: hidden;
}
#imageSlider img{width:100px; height:100px;}
::-webkit-scrollbar {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="imageSlider">
    <div id="prev">
        <img src="" width="40px" />
    </div>
    <div id="next">
        <img src="" width="40px" />
    </div>
    <div id="sliderWrapper">
        <img src="" height="90px;" />
        <img src="" height="90px;" />
        <img src="" height="90px;" /><img src="" height="90px;" />
        <img src="" height="90px;" />
        <img src="" height="90px;" />
        <img src="" height="90px;" /><img src="" height="90px;" />
        <img src="" height="90px;" /><img src="" height="90px;" /><img src="" height="90px;" /><img src="" height="90px;" /><img src="" height="90px;" /><img src="" height="90px;" /><img src="" height="90px;" />
        
    
    </div>
</div>

悬停在箭头上时左右滚动

Scroll left and right when hovering on arrows

javascript

jquery

scroll

hover