开发者

Getting JQuery slider to stop on mouse hover

开发者 https://www.devze.com 2023-03-26 03:17 出处:网络
I have a web site with a jQuery slider that automatically slides when the page is loaded. How can I get the slider to stop when the mouse hovers over it?

I have a web site with a jQuery slider that automatically slides when the page is loaded. How can I get the slider to stop when the mouse hovers over it?

I'm using the following jQuery code:

  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 * 开发者_StackOverflow中文版-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);
            }
        });

    };


Possibly using the .stop() command?

So after your 2 animate lines:

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

Also, there's no point in having div before elements with an ID, so remove them:
div#scroll_Bar

0

精彩评论

暂无评论...
验证码 换一张
取 消