嘿我創造了這個小提琴:阻止特定功能的事件
正如你可以看到,它的滑動image's一個相當不錯的工作示例。
但有一點是缺少:
當我將鼠標懸停拋出一個段落中,「autoslide功能」應被禁止,那爲什麼我添加了這個代碼懸停事件:
event.preventDefault();
但autoslide功能仍然處理,任何建議?需要你的幫助,GREETING's!
嘿我創造了這個小提琴:阻止特定功能的事件
正如你可以看到,它的滑動image's一個相當不錯的工作示例。
但有一點是缺少:
當我將鼠標懸停拋出一個段落中,「autoslide功能」應被禁止,那爲什麼我添加了這個代碼懸停事件:
event.preventDefault();
但autoslide功能仍然處理,任何建議?需要你的幫助,GREETING's!
爲此,您需要使用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
是的,謝謝,這就是我試圖得到的,一個問題:當我懸停扔,div容器「第一」,數據網址中的圖像應該顯示,如何獲得這添加沒有破壞autoslide ? – user3235284
當用戶將鼠標懸停在「First」上時,您想在哪裏顯示此圖像以及「First」Label? –
它應該替換,或者是什麼意思? – user3235284
的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:我已經修復了我的代碼中的語法錯誤,以防您仍然想要引用它。
不適用於我的,可以顯示小提琴嗎? – user3235284
a)你沒有通過任何事件,所以你什麼也沒有阻止b)你不想阻止懸停事件,你想阻止功能繼續 –
你是什麼意思「通過懸停扔一段」你沒有段落在那裏,你的意思是滑塊控件?你期望的行爲是什麼? –