懸停以連續滾動水平格

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) {...