2014-02-07 110 views
0

嘿我創造了這個小提琴:阻止特定功能的事件

http://jsfiddle.net/5H5Xq/17/

正如你可以看到,它的滑動image's一個相當不錯的工作示例。

但有一點是缺少:

當我將鼠標懸停拋出一個段落中,「autoslide功能」應被禁止,那爲什麼我添加了這個代碼懸停事件:

event.preventDefault(); 

但autoslide功能仍然處理,任何建議?需要你的幫助,GREETING's!

+0

a)你沒有通過任何事件,所以你什麼也沒有阻止b)你不想阻止懸停事件,你想阻止功能繼續 –

+0

你是什麼意思「通過懸停扔一段」你沒有段落在那裏,你的意思是滑塊控件?你期望的行爲是什麼? –

回答

1

爲此,您需要使用Clearinterval()來清除間隔,因爲幻燈片是通過Setinterval發生的,類似這樣。

// Untuk delay gambarnya 

var i = 0, max = 3; 
myFunction = function(event){ 
    $(".subbox1").each(function() {anim(this)}); 
    i += 1; 
    if(i >= max) { i = 0; } 
} 
var interval = setInterval(myFunction, 1000); 

$(".slider").hover(function() { 
    clearInterval(interval); 
    var img = $('<img>'); 
img.attr('src', $(this).attr('data-url')); 
    $('#newImage').html(img); 
    $('.images').hide(); 
    return false; 
    i += 1; 
    // $(".subbox1").each(function() {anim(this)}); 

}); 

$(".slider").mouseout(
    function(){ 
     $('.images').show(); 
     // $('#newImage').hide(); 
interval = setInterval(myFunction, 1000); 
    } 
); 

修訂版DEMO

Demo

+0

是的,謝謝,這就是我試圖得到的,一個問題:當我懸停扔,div容器「第一」,數據網址中的圖像應該顯示,如何獲得這添加沒有破壞autoslide ? – user3235284

+0

當用戶將鼠標懸停在「First」上時,您想在哪裏顯示此圖像以及「First」Label? –

+0

它應該替換,或者是什麼意思? – user3235284

1

的preventDefault指的是瀏覽器的默認操作。例如,鏈接的默認操作是轉到其他頁面。懸停事件沒有默認操作,這就解釋了爲什麼您的preventDefault看起來什麼都不做。我認爲你的意思是延遲/殺死定時器。試試這個:

var i = 0, max = 3; 
var interval; 
function restart() { 
    clearInterval(interval); 
    interval = setInterval(function(event){ 
     $(".subbox1").each(function() {anim(this)}); 
     i = (i + 1) % max; 
    }, 5000); 
} 

$(".slider").hover(function() { 
    i = (i + 1) % max; 
    restart(); 
    $(".subbox1").each(function() {anim(this)}); 
    event.preventDefault(); 
}); 

如果所需的行爲是爲了防止動畫,直到鼠標移開,那麼你需要做的是:

function anim(selector) { 
    $(".images img", selector).first().appendTo($('.images', selector)).fadeOut(1000); 
    $(".images img", selector).first().fadeIn(1000); 
} 

// Untuk delay gambarnya 
var i = 0; 
var max = 3; 
var interval; 
function start() { 
    clearInterval(interval); 
    interval = setInterval(function(event){ 
     $(".subbox1").each(function() { 
      anim(this); 
     }); 
     i = (i + 1) % max; 
    }, 5000); 
} 

function stop() { 
    clearInterval(interval); 
} 

$(".slider").hover(function() { 
    i = (i + 1) % max; 
    $(".subbox1").each(function() { 
     anim(this); 
    }); 
    stop(); 
}, function() { 
    start(); 
}); 

此外,由於你的動畫功能重新安排DOM,你可能要設計一種基於其原始順序來引用圖像的方式。否則,您的懸停可能無法按預期運行。

編輯:在情況下,第二實施例不清,hover函數可以採取鼠標離開函數作爲其第二個參數。

編輯2:我已經修復了我的代碼中的語法錯誤,以防您仍然想要引用它。

+0

不適用於我的,可以顯示小提琴嗎? – user3235284