[英]Continuously scroll jCarousel on button hover
I'm using the jCarousel plugin and I've hit a road bump... 我正在使用jCarousel插件,我遇到了路障......
I need the carousel to continuously scroll whenever the navigation buttons are hovered. 每当导航按钮悬停时,我都需要旋转木马连续滚动。 Changing the built-in configuration variables to "mouseover" just scrolls once per hover.
将内置配置变量更改为“鼠标悬停”只需在每个悬停时滚动一次。
I came across this similar question but I'm not a javascript expert and can't get the answer to work. 我遇到了这个类似的问题,但我不是一个JavaScript专家,无法得到工作的答案。
Here's my code: 这是我的代码:
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();
});
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 10,
start: 1,
scroll: 1,
animation: 'slow',
wrap: 'circular',
buttonNextEvent: 'mouseover',
buttonPrevEvent: 'mouseover',
initCallback: mycarousel_initCallback
});
});
Any help would be much appreciated. 任何帮助将非常感激。
You can use the following script to make it work. 您可以使用以下脚本使其工作。 I have tested it on
jquery.jcarousel.js
and jquery-1.4.1
我在
jquery.jcarousel.js
和jquery-1.4.1
上测试过它
To note, my jcarousel settings did not have auto scroll. 要注意,我的jcarousel设置没有自动滚动。
<script>
jQuery(document).ready(function() {
var _this = null;
$('.jcarousel-next').mouseover(function() {
if (!$(this).hasClass("jcarousel-next-disabled")) {
_this = $(this);
_this.click();
window.setTimeout(CallAgain, 100);
}
});
$('.jcarousel-next').mouseout(function() {
if (!$(this).hasClass("jcarousel-next-disabled")) {
_this = null;
}
});
function CallAgain() {
if (_this != null) {
//alert("Inside Call again");
_this.click();
window.setTimeout(CallAgain, 100);
}
};
$('.jcarousel-prev').mouseover(function() {
if (!jQuery(this).hasClass("jcarousel-prev-disabled")){
_this = $(this);
_this.click();
window.setTimeout(CallAgain, 100);
}
});
$('.jcarousel-prev').mouseout(function() {
if (!$(this).hasClass("jcarousel-next-disabled")) {
_this = null;
}
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.