gpt4 book ai didi

jquery - 如何在鼠标悬停时立即停止 jcarousel 并在鼠标移出时继续

转载 作者:行者123 更新时间:2023-11-28 08:52:28 26 4
gpt4 key购买 nike

我试图通过一个 Action (在本例中为悬停)停止过渡,但我不知道如何实现它。这是我进行测试的地方:

http://lvemil.net/gla/web/

我有 3 个 jcarousel 实例,我的目标是在鼠标悬停时(立即)停止移动。问题是:当鼠标悬停在旋转木马上时,我停止了它,但是当前的过渡在停止之前就结束了,感觉不是我想要的,我希望在鼠标悬停时立即停止移动。

这是第一个轮播的初始化:

$('#jcarousel1')
.jcarousel({
'animation': {
'duration': 6000, //DEFINE SPEED
'easing': 'linear',
'complete': function() {
//ON ANIMATION COMPLETE ACTION GO HERE
}
},
'wrap': 'circular'


}).jcarouselAutoscroll({
interval: 1,
target: '+=1',
autostart: true
}).on('mouseover',function(e){
$(this).jcarouselAutoscroll('stop');
}).on('mouseout',function(e){
$(this).jcarouselAutoscroll('start');
});

另外两个jcarousel的实例也是类似的初始化。

更新:我已经尝试过:

$('#jcarousel1').jcarousel('list').stop();

这会停止移动(滚动),但我无法在鼠标移出之前的相同位置再次开始移动。

更新 1:我还尝试了 mouseout(并使其再次工作)

$('#jcarousel1').jcarousel('destroy')
$('#jcarousel1').jcarousel( arrayWithInitOptions )

但这会产生不良影响,因为从旋转木马的开头开始移动(重新加载),从第一个元素开始,我想从鼠标悬停时的相同位置重新开始。

最佳答案

你可以使用这样的东西

    <script type="text/javascript" src="jquery.jcarousel.min.js"></script>
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};

jQ=jQuery.noConflict();
jQ(document).ready(function() {
jQ('#mycarousel').jcarousel({
auto: 3,
animation: 1000,
scroll: 1,
easing: "linear",
wrap: 'circular',
initCallback: mycarousel_initCallback
});
});

</script>

关于jquery - 如何在鼠标悬停时立即停止 jcarousel 并在鼠标移出时继续,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21651059/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com