當鼠標懸停在箭頭上時左右滾動

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>