让鼠标悬停时停止JQuery滑块

时间:2011-08-04 16:31:39

标签: jquery jquery-plugins

我有a web site带有jQuery滑块,可在页面加载时自动滑动。当鼠标悬停在滑块上时,如何让滑块停止?

我正在使用以下jQuery代码:

  var my_jQuery = jQuery.noConflict(true);

  window.onload = function () {

        // added  by pesach

        var totalWidth=0;
        var numItems=0;
        my_jQuery('li', 'div#scroll_Bar').each (function() {

        totalWidth = totalWidth + my_jQuery(this).outerWidth() + 1;
        numItems = numItems + 1;

        });
        //alert(totalWidth * -1);

        my_jQuery('ul', 'div#scroll_Bar').width(totalWidth);
        var slidewidth = totalWidth - 960;
        //end of addition


        var container = $('div#scroll_Bar');
        var ul = $('ul', container);

        var itemsWidth = ul.innerWidth() - container.outerWidth();

        //$("div.sliderGallery ul li").hover(stop(true, true), stop(true, true));
        my_jQuery('ul', 'div#scroll_Bar').animate({'left' : slidewidth * -1}, numItems * 1000, 'linear');
        my_jQuery('ul', 'div#scroll_Bar').animate({'left' : 0}, numItems * 800, 'linear');


        my_jQuery('.slider', container).slider({
            min: 0,
            max: itemsWidth,
            handle: '.handle',
            stop: function (event, ui) {
                ul.animate({'left' : ui.value * -1}, 500),my_jQuery('ul', 'div#scroll_Bar').stop(true, true);
            },
            slide: function (event, ui) {
                ul.css('left', ui.value * -1),my_jQuery('ul', 'div#scroll_Bar').stop(true, true);
            }
        });

    };

1 个答案:

答案 0 :(得分:1)

可能使用.stop()命令?

所以在你的2个动画线之后:

my_jQuery('ul','#scoll_Bar').mouseover(function(){
    $(this).stop();
});

此外,在具有ID的元素之前使用div没有意义,因此请删除它们:
<击> DIV #scroll_Bar