獲取jQuery幻燈片動畫以停止點擊

我有一個使用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); 

});

來源

2010-05-25 user279860

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

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

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

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

來源

2010-05-25 17:34:46 mVChr

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

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

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

我最近在一個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); 
}

來源

2014-01-08 02:08:18

獲取jQuery幻燈片動畫以停止點擊

回答

相關問題