在按钮悬停时连续滚动jCarousel [英] Continuously scroll jCarousel on button hover

问题描述

我正在使用jCarousel插件，遇到了麻烦...

I'm using the jCarousel plugin and I've hit a road bump...

每当悬停导航按钮时，我都需要旋转木马连续滚动.将内置配置变量更改为"mouseover"，每个悬停只滚动一次.

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.

我遇到了类似的问题，但我不是JavaScript专家，因此无法获得答案.

I came across this similar question but I'm not a javascript expert and can't get the answer to work.

这是我的代码:

    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
    });
});

任何帮助将不胜感激.

推荐答案

您可以使用以下脚本使其正常运行.我已经在jquery.jcarousel.js和jquery-1.4.1

You can use the following script to make it work. I have tested it on jquery.jcarousel.js and jquery-1.4.1

请注意，我的jcarousel设置没有自动滚动.

To note, my jcarousel settings did not have auto scroll.

<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>

这篇关于在按钮悬停时连续滚动jCarousel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！