轮播滑块创建自定义用户鼠标切换到轮播滑块时如何停止

Question

>我在这里为javascript代码创建了一个小轮播

$.fn.calcslider = function(options){
var settings = $.extend({
// These are the defaults.
autoslide: false,
autoslideInterval : 1000,
slideInterval : 1000
}, options );
return this.each(function(){
var autoslide = '', scope = $(this),
liLength = scope.find('.calc-list li').length,
liWidth = scope.find('.calc-list li').outerWidth(true),
totalWidth = liLength * liWidth,
flag = true;
scope.find('.calc-list ul').width(totalWidth);
if(liLength == 1){
scope.find('.prev-slide').addClass('hide');
scope.find('.next-slide').addClass('hide');
}
var setAutoSider = function(check){
if(settings.autoslide){
if(check == 'clear'){
clearInterval(autoslide);
}else{
autoslide = setInterval(function(){
scope.find('.next-slide').trigger('click');
}, settings.autoslideInterval);
}   
}               
}
setAutoSider('set');
scope.find('.prev-slide').stop(true, true).click(function(){
if(flag == true){
flag = false;
setAutoSider('clear');
var lastLi = scope.find('.calc-list ul li:last-child').detach();
scope.find('.calc-list ul').prepend(lastLi);
scope.find('.calc-list ul').css('marginLeft' , '-'+ liWidth +'px');
scope.find('.calc-list ul').animate({
marginLeft : '0'
},settings.slideInterval, function(){
flag = true;
setAutoSider('set');
});
}
return false;
});
scope.find('.next-slide').stop(true, true).click(function(){
if(flag == true){
flag = false;
setAutoSider('clear');
scope.find('.calc-list ul').animate({
marginLeft : '-'+ liWidth +'px'
},settings.slideInterval, function(){
var firstLi = scope.find('.calc-list ul li:first-child').detach();
scope.find('.calc-list ul').append(firstLi);
scope.find('.calc-list ul').css('marginLeft' , 0);
flag = true;
setAutoSider('set');
});
}
return false;
});
});
}

我习惯了

$('.mywrap').calcslider({
autoslide : true,
autoslideInterval : 5000,
slideInterval : 500
});

现在工作正常，现在我正在为此花费一个功能 如果用户将鼠标悬停在此位置，则它将停止工作并鼠标退出，而不是现在工作。

Answer 1

我可以看到你正在使用jQuery。您可以使用 jQuery 悬停方法来实现此目的。它接受 2 个回调函数，一个在悬停时，另一个在悬停时。

所以它可能是这样的(在你的主函数中(：

scope.hover( function() {
// this one is fired when you point on the element
setAutoSider( 'clear' );
}, function() {
// this one is fired when you leave the element
setAutoSider('set');
} );

Answer 2

我为未来的用户发布这个答案：

$.fn.calcslider = function(options){
var settings = $.extend({
// These are the defaults.
autoslide: false,
autoslideInterval : 1000,
slideInterval : 1000
}, options );
return this.each(function(){
var autoslide = '', scope = $(this),
liLength = scope.find('.calc-list li').length,
liWidth = scope.find('.calc-list li').outerWidth(true),
totalWidth = liLength * liWidth,
flag = true;
scope.find('.calc-list ul').width(totalWidth);

if(liLength == 1){
scope.find('.prev-slide').addClass('hide');
scope.find('.next-slide').addClass('hide');
}

var setAutoSider = function(check){
if(settings.autoslide){
if(check == 'clear'){
clearInterval(autoslide);
}else{
autoslide = setInterval(function(){
scope.find('.next-slide').trigger('click');
}, settings.autoslideInterval);
}   
}               
}

setAutoSider('set');
scope.mouseenter(function(){
setAutoSider('clear');    
}).mouseleave(function(){
setAutoSider('set');
});

scope.find('.prev-slide').stop(true, true).click(function(){
if(flag == true){
flag = false;
//setAutoSider('clear');
var lastLi = scope.find('.calc-list ul li:last-child').detach();
scope.find('.calc-list ul').prepend(lastLi);
scope.find('.calc-list ul').css('marginLeft' , '-'+ liWidth +'px');
scope.find('.calc-list ul').animate({
marginLeft : '0'
},settings.slideInterval, function(){
flag = true;
//setAutoSider('set');
});
}
return false;
});
scope.find('.next-slide').stop(true, true).click(function(){
if(flag == true){
flag = false;
//setAutoSider('clear');
scope.find('.calc-list ul').animate({
marginLeft : '-'+ liWidth +'px'
},settings.slideInterval, function(){
var firstLi = scope.find('.calc-list ul li:first-child').detach();
scope.find('.calc-list ul').append(firstLi);
scope.find('.calc-list ul').css('marginLeft' , 0);
flag = true;
// setAutoSider('set');
});
}
return false;
});
});
}