2013-03-11 63 views
1

我有以下腳本,並試圖添加鼠標在幻燈片上輸入和離開事件,使鼠標在圖像上時,它不會切換到下一個,並一旦刪除它繼續。鼠標輸入和鼠標離開在JavaScript

當滑鼠結束時,我可以得到幻燈片停止,但一旦鼠標沒有了,幻燈片將不會繼續進行。

我不確定如果這兩條線是在正確的地方:

---> jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;}); 
    ---> jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;}); 
jQuery(function() { 
jQuery('a').focus(function() { 
    this.blur(); 
}); 
SI.Files.stylizeAll(); 
slider.init(); 

}); 

---> var MOUSE_IN = false; 

var slider = { 
num: -1, 
cur: 0, 
cr: [], 
al: null, 
at: 10 * 1000, /* change 1000 to control speed*/ 
ar: true, 
anim:'slide', 
fade_speed:600, 
init: function() { 
    if (!slider.data || !slider.data.length) return false; 

    var d = slider.data; 
    slider.num = d.length; 
    var pos = Math.floor(Math.random() * 1); 
    for (var i = 0; i < slider.num; i++) { 
     if(slider.anim == 'fade') 
     { 
      jQuery('#' + d[i].id).hide(); 
     } 
     else{ 
      jQuery('#' + d[i].id).css({ 
       left: ((i - pos) * 1000) 
      }); 
     } 
     jQuery('#slide-nav').append('<a id="slide-link-' + i + '" href="#" onclick="slider.slide(' + i + ');return false;" onfocus="this.blur();">' + (i + 1) + '</a>'); 
    } 
    jQuery('img,div#slide-controls', jQuery('div#slide-holder')).fadeIn(); 
    ---> jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;}); 
    ---> jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;}); 
    slider.text(d[pos]); 
    slider.on(pos); 
    if(slider.anim == 'fade') 
    { 
     slider.cur = -1; 
     slider.slide(0); 
    } 
    else{ 
    slider.cur = pos; 
    window.setTimeout('slider.auto();', slider.at); 
    } 
}, 
auto: function() { 
    if (!slider.ar) return false; 
    if(MOUSE_IN) return false; 
    var next = slider.cur + 1; 
    if (next >= slider.num) next = 0; 
    slider.slide(next); 
}, 
slide: function (pos) { 
    if (pos < 0 || pos >= slider.num || pos == slider.cur) return; 

    window.clearTimeout(slider.al); 
    slider.al = window.setTimeout('slider.auto();', slider.at); 

    var d = slider.data; 
    if(slider.anim == 'fade') 
    { 
     for (var i = 0; i < slider.num; i++) { 
     if(i == slider.cur || i == pos) continue; 
     jQuery('#' + d[i].id).hide(); 
     } 

     if(slider.cur != -1){ 
     jQuery('#' + d[slider.cur].id).stop(false,true); 
     jQuery('#' + d[slider.cur].id).fadeOut(slider.fade_speed); 
     jQuery('#' + d[pos].id).fadeIn(slider.fade_speed); 

     } 
     else 
     { 
     jQuery('#' + d[pos].id).fadeIn(slider.fade_speed); 
     } 
    } 
    else 
    { 
     for (var i = 0; i < slider.num; i++) 
     jQuery('#' + d[i].id).stop().animate({ 
      left: ((i - pos) * 1000) 
     }, 
     1000, 'swing'); 
    } 
    slider.on(pos); 
    slider.text(d[pos]); 
    slider.cur = pos; 
}, 
on: function (pos) { 
    jQuery('#slide-nav a').removeClass('on'); 
    jQuery('#slide-nav a#slide-link-' + pos).addClass('on'); 
}, 
text: function (di) { 
    slider.cr['a'] = di.client; 
    slider.cr['b'] = di.desc; 
    slider.ticker('#slide-client span', di.client, 0, 'a'); 
    slider.ticker('#slide-desc', di.desc, 0, 'b'); 
}, 
ticker: function (el, text, pos, unique) { 
    if (slider.cr[unique] != text) return false; 

    ctext = text.substring(0, pos) + (pos % 2 ? '-' : '_'); 
    jQuery(el).html(ctext); 

    if (pos == text.length) jQuery(el).html(text); 
    else window.setTimeout('slider.ticker("' + el + '","' + text + '",' + (pos + 1) + ',"' + unique + '");', 30); 
} 
}; 

if (!window.SI) { 
var SI = {}; 
}; 
SI.Files = { 
htmlClass: 'SI-FILES-STYLIZED', 
fileClass: 'file', 
wrapClass: 'cabinet', 

fini: false, 
able: false, 
init: function() { 
    this.fini = true; 

    var ie = 0 
    if (window.opera || (ie && ie < 5.5) || !document.getElementsByTagName) { 
     return; 
    } 
    this.able = true; 

    var html = document.getElementsByTagName('html')[0]; 
    html.className += (html.className != '' ? ' ' : '') + this.htmlClass; 
}, 
stylize: function (elem) { 
    if (!this.fini) { 
     this.init(); 
    }; 
    if (!this.able) { 
     return; 
    }; 

    elem.parentNode.file = elem; 
    elem.parentNode.onmousemove = function (e) { 
     if (typeof e == 'undefined') e = window.event; 
     if (typeof e.pageY == 'undefined' && typeof e.clientX == 'number' && document.documentElement) { 
      e.pageX = e.clientX + document.documentElement.scrollLeft; 
      e.pageY = e.clientY + document.documentElement.scrollTop; 
     }; 
     var ox = oy = 0; 
     var elem = this; 
     if (elem.offsetParent) { 
      ox = elem.offsetLeft; 
      oy = elem.offsetTop; 
      while (elem = elem.offsetParent) { 
       ox += elem.offsetLeft; 
       oy += elem.offsetTop; 
      }; 
     }; 
     var x = e.pageX - ox; 
     var y = e.pageY - oy; 
     var w = this.file.offsetWidth; 
     var h = this.file.offsetHeight; 
     this.file.style.top = y - (h/2) + 'px'; 
     this.file.style.left = x - (w - 30) + 'px'; 
    }; 
}, 
stylizeById: function (id) { 
    this.stylize(document.getElementById(id)); 
}, 
stylizeAll: function() { 
    if (!this.fini) { 
     this.init(); 
    }; 
    if (!this.able) { 
     return; 
    }; 

    var inputs = document.getElementsByTagName('input'); 
    for (var i = 0; i < inputs.length; i++) { 
     var input = inputs[i]; 
     if (input.type == 'file' && input.className.indexOf(this.fileClass) != -1 && input.parentNode.className.indexOf(this.wrapClass) != -1) this.stylize(input); 
    }; 
} 
}; 

(function (jQuery) { 
jQuery.fn.pngFix = function (settings) { 
    settings = jQuery.extend({ 
     blankgif: 'blank.gif' 
    }, 
    settings); 
    var ie55 = (navigator.appName == 'Microsoft Internet Explorer' && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf('MSIE 5.5') != -1); 
    var ie6 = (navigator.appName == 'Microsoft Internet Explorer' && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf('MSIE 6.0') != -1); 

    if (jQuery.browser.msie && (ie55 || ie6)) { 

     jQuery(this).each(function() { 
      var bgIMG = jQuery(this).css('background-image'); 
      if (bgIMG.indexOf(".png") != -1) { 
       var iebg = bgIMG.split('url("')[1].split('")')[0]; 
       jQuery(this).css('background-image', 'none'); 
       jQuery(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='" + settings.sizingMethod + "')"; 
      } 
     }); 

    } 
    return jQuery; 
}; 
})(jQuery); 
jQuery(function() { 
if (jQuery.browser.msie && jQuery.browser.version < 7) { 

} 
}); 

回答

1

兩條線的位置是好的,他們只是在輸入/輸出事件添加一個事件處理程序的鼠標。你的經驗實際上是在臨自動功能,如果你注意到,在init函數結束時的問題,您有:

window.setTimeout('slider.auto();', slider.at) 

這條線,使該自動函數調用的slider.at時間後(這是在你的榜樣10秒),如果MOUSE_IN自動功能檢查設置爲true,如果不是,然後調用幻燈片功能,然後在幻燈片功能,您有另一個調用自動功能:

slider.al = window.setTimeout('slider.auto();', slider.at); 

但一旦將MOUSE_IN變量設置爲true,auto函數就會返回並停止執行其他幻燈片函數,爲解決此問題,您可能需要處理e滑動功能中的MOUSE_IN邏輯,或者在自動功能中返回false之前,再次調用auto函數。

+0

嘿,感謝您的快速回復,併爲最後一個抱歉。 我仍然試圖圍繞這一點,因爲這是我第一次使用JavaScript。 我從你的迴應中得到了什麼如果我在任何函數中使用相同的邏輯,如果仍然會導致相同的輸出? 因爲一旦auto函數第二次返回false,幻燈片函數將不會被調用?另外如果我打電話超時,自動功能再次不會創建一個無限循環:S – 2013-03-12 12:56:56

+0

愚蠢的問題,但它可以調試JavaScript?這會讓我對此更加了解。 – 2013-03-12 14:32:54

+0

當if語句返回false時,它與其他語言類似,只要它返回false,它就會跳出該函數而不進行其他操作? – 2013-03-12 14:34:38

0

認爲這會工作,但它沒有,mouseleave eventdoesnt似乎火。

jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;}); 
jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;}); 
while(MOUSE_IN==true) 
{ 
jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;}); 
jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;}); 
} 
相關問題