Question

我喜欢在现有的java脚本轮播滑块上添加鼠标悬停的停止功能。请给我一些我必须添加的附加代码。这对我来说很容易。

 <script type="text/javascript">
        // the carousel
        var $carousel = null;

        //  the draggable wrapper
        var $wrapper = null;

        //  the width of one item
        var itemWidth = 800;

        //  the duration of the scrolling
        var scrollDuration = 900;

        //  dragging-engine
        var startDragPosition = false;
        function startDrag( event ) {
            event.preventDefault();

            if ( $carousel.triggerHandler( 'isScrolling' ) ) {
                startDragPosition = false;
                return;
            }
            startDragPosition = event.pageX;
            $wrapper.bind(
                'mousemove',
                function( e ) {
                    $wrapper.css({
                        'marginLeft': -(itemWidth + startDragPosition - e.pageX)
                    });
                }
            );
        }
        function stopDrag( event ) {
            event.preventDefault();
            $wrapper.unbind('mousemove');

            if ( startDragPosition ) {
                var currentDragPosition = event.pageX;
                var direction = false;
                if ( startDragPosition < currentDragPosition ) {
                    direction = 'prev';
                } else if ( startDragPosition > currentDragPosition ) {
                    direction = 'next';
                }
                if ( direction ) {
                    $carousel.trigger( direction );
                    $wrapper.animate({
                        'marginLeft': -itemWidth
                    }, scrollDuration);
                }
            }
            startDragPosition = false;
        }

        $(function() {

            //  the carousel
            $carousel = $('#carousel');
            $carousel.carouFredSel({
                width: 800 * 3,
                height: 400,
                align: false,
                items: {
                    visible: 3,
                    start: -1
                },

                scroll: {
                    items: 1,
                    duration: 700
                },
                auto: true
            });

            //  make the wrapper draggable
            $wrapper = $carousel.parent();
            $wrapper.css({
                'cursor': 'pointer',
                'marginLeft': -itemWidth
            });
            $wrapper.bind('mousedown', startDrag)
            $wrapper.bind('mouseup', stopDrag)
            $wrapper.bind('mouseleave', stopDrag);
        });

    </script>

Answer 1

添加pauseOnHover: true,

scroll: {
     pauseOnHover: true,  // add this lin
     items: 1,
     duration: 700
},

您的最终脚本看起来像

// the carousel
var $carousel = null;

//  the draggable wrapper
var $wrapper = null;

//  the width of one item
var itemWidth = 800;

//  the duration of the scrolling
var scrollDuration = 900;

//  dragging-engine
var startDragPosition = false;

function startDrag(event) {
    event.preventDefault();

    if ($carousel.triggerHandler('isScrolling')) {
        startDragPosition = false;
        return;
    }
    startDragPosition = event.pageX;
    $wrapper.bind(
        'mousemove',

    function (e) {
        $wrapper.css({
            'marginLeft': -(itemWidth + startDragPosition - e.pageX)
        });
    });
}

function stopDrag(event) {
    event.preventDefault();
    $wrapper.unbind('mousemove');

    if (startDragPosition) {
        var currentDragPosition = event.pageX;
        var direction = false;
        if (startDragPosition < currentDragPosition) {
            direction = 'prev';
        } else if (startDragPosition > currentDragPosition) {
            direction = 'next';
        }
        if (direction) {
            $carousel.trigger(direction);
            $wrapper.animate({
                'marginLeft': -itemWidth
            }, scrollDuration);
        }
    }
    startDragPosition = false;
}

$(function () {

    //  the carousel
    $carousel = $('#carousel');
    $carousel.carouFredSel({
        width: 800 * 3,
        height: 400,
        align: false,
        items: {
            visible: 3,
            start: -1
        },

        scroll: {
            pauseOnHover: true,  // add this line
            items: 1,
            duration: 700
        },
        auto: true
    });

    //  make the wrapper draggable
    $wrapper = $carousel.parent();
    $wrapper.css({
        'cursor': 'pointer',
            'marginLeft': -itemWidth
    });
    $wrapper.bind('mousedown', startDrag)
    $wrapper.bind('mouseup', stopDrag)
    $wrapper.bind('mouseleave', stopDrag);
});

Answer 2

尝试以下代码。我认为这是工作。

$(function() {
$('.carousel').each(function(){
    $(this).carousel({
        interval: false
    });
});
});

在鼠标悬停停止旋转木马滑块

2 个答案: