当鼠标悬停在箭头上时左右滚动

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>