2010-05-25 71 views
1

我有一個使用jQuery構建的幻燈片,暫停時懸停。它有一組縮略圖,它們位於圖像頂部,可以在單擊時推進圖像,否則幻燈片會自動旋轉所有圖像。還有+/-可以擴展和縮小與每個圖像相關的標題。如果其中一個縮略圖被點擊或+/-,我想讓幻燈片自動前進停止。基本上,只要用戶點擊圖庫中的任何位置(div class =「。homeImg」)就停下來。我有一個主要的大腦放屁,讓這個工作正常,可以使用一些建議。這裏是jQuery的:獲取jQuery幻燈片動畫以停止點擊

$(document).ready(function() { 

$(".main_image .desc").show(); //Show image info 
$(".main_image .block").animate({ opacity: 0.85 }, 1); //Set Opacity 

//Click and Hover events for thumbnail list 
$(".image_thumb ul li:first").addClass('active'); 

// * Adds a class 'last' to the last li to let the rotator know when to return to the first 
$(".image_thumb ul li:last").addClass('last'); 

$(".image_thumb ul li").click(function(){ 
//Set Variables 
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image 
var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL 
var imgDesc = $(this).find('.block').html(); //Get HTML of block 
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block 

if ($(this).is(".active")) { //If it's already active, then… 
return false; // Don't click through 
} else { 
//Animate 
$(".main_image img").animate({ opacity: 0}, 800); 
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 800, function() { 
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250); 
$(".main_image img").attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 250); 
}); 
} 

$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists 
$(this).addClass('active'); //add class of 'active' on this list only 
return false; 

}) .hover(function(){ 
$(this).addClass('hover'); 
}, function() { 
$(this).removeClass('hover'); 
}); 

//Toggle teaser 
$("a.collapse").click(function(){ 
$(".main_image .block").slideToggle(); 
$("a.collapse").toggleClass("show"); 
return false; // added to remove # browser jump 
}); 

// If we are hovering over the image area, pause the clickNext function 
pauseClickNext = false; 
$(".homeImg").hover(
function() { 
pauseClickNext = true; 
}, 
function() { 
pauseClickNext = false; 
} 
); 

// Define function to click the next li 
var clickNext = function(){ 
if(!pauseClickNext) { 
/// find the next li after .active 
var $next_li = $("li.active").next("li"); 
if($("li.active").hasClass("last")){ 
$(".image_thumb ul li:first").trigger("click"); 
} else { 
$next_li.trigger("click"); 
} 
} 
}; 

// Time between image transition 
setInterval(clickNext, 6000); 

}); 
+0

我看不到什麼代碼使它保持旋轉後的第一對動畫...你沒有使用任何計時器? – arnorhs 2010-05-25 17:38:05

回答

2

在你的最後一行:var slideTimer = setInterval(clickNext, 6000);

然後,當你想停止動畫:當你要重新啓動它只是再次設定clearInterval(slideTimer);

然後:slideTimer = setInterval(clickNext, 6000);

+0

這與點擊事件有什麼關係?當我上面提到的任何點擊都發生時,我無法讓這停止自動化。謝謝! – user279860 2010-05-25 17:49:11

+0

我還應該補充說,這似乎殺了我的標題顯示/隱藏功能。 *編輯 - 我的錯誤,錯字。 – user279860 2010-05-25 17:53:50

+0

您可以將第二行添加到要停止自動播放的事件,將第三行添加到要重新啓動自動播放的任何事件。 – mVChr 2010-05-25 18:34:47

0

我最近在一個div裏設置了一個幻燈片放映,並使用遞歸使幻燈片放映繼續播放,直到我的「停止」變量設置爲「true」。使用這種方法,只要您設置stop = true,幻燈片動畫就會停止;在onclick或以其他方式:

var stop = false; 
var i = 0; 

function playGallery(){   
    $("#playerWrapper").fadeOut(1500, function() { 

    if(i<8){ 
     i = i+1; 
    } 
    else{ 
     i = 1; 
    } 

    $("#playerWrapper") 
    .css('background-image','url("images/' + 'brooke' + i + '.jpg' + '")'); 

    if(!stop) { 
     //Use recursion here to keep rotating slides until stop==true 
     playGallery(); 
    } 

    }).fadeIn(1500); 
}