Getting JQuery slider to stop on mouse hover
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
精彩评论