jQuery圖像交叉推杆問題

Question

我有一個圖像切換器淡入淡出（它會交叉淡入淡出 - 自動（1 - x））和一個傳呼機，但我不能設法讓圖像旋轉監聽頁面上的點擊操作，當點擊尋呼機的圖像將不會jup tu特定的img。

問題出在旋轉功能 triggerID將保存當前pager-element的「rel」num，它等於圖像「list」num，所以當點擊頁面時，triggerID將會顯示被點擊的相對數...我可以用它來顯示圖像

這裏是JQ代碼：

$(".paging a:first").addClass("active"); 

//Rotation 
rotate = function(){ 
var triggerID = $active.attr("rel"); //Get number of times to images 

$(".paging a").removeClass('active'); //Remove all active class 
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) 


//CrossFade Animation 
var $activeImg = $('.image_reel img.active'); 
if ($activeImg.length == 0) $activeImg = $('.image_reel img:last'); 

var $next = $activeImg.next().length ? $activeImg.next() : $('.image_reel img:first'); 

$activeImg.addClass('last-active'); 

$next.css({opacity: 0.0}) 
    .addClass('active') 
    .animate({opacity: 1.0}, 500, function() { 
    $activeImg.removeClass('active last-active'); 
    }); 
}; 

//Rotation and Timing Event 
rotateSwitch = function(){ 
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds 
    $active = $('.paging a.active').next(); //Move to the next paging 

    if ($active.length === 0) { //If paging reaches the end... 
    $active = $('.paging a:first'); //go back to first 

    } 

    rotate(); //Trigger the paging and slider function 
}, 3000); //Timer speed in milliseconds (3 seconds) 
}; 

rotateSwitch(); //Run function on launch 



//On Click 
$(".paging a").click(function() { 
$active = $(this); //Activate the clicked paging 
//Reset Timer 
clearInterval(play); //Stop the rotation 
rotate(); //Trigger rotation immediately 
rotateSwitch(); // Resume rotation timer 
return false; //Prevent browser jump to link anchor 
}); 

的HTML代碼：

<div class="image_reel"> 
    <img src="images/slideshow/img1.jpg" alt="image 1" class="active"> 
    <img src="images/slideshow/img2.jpg" alt="image 2"> 
    <img src="images/slideshow/img3.jpg" alt="image 3"> 
    <img src="images/slideshow/img4.jpg" alt="image 4"> 
</div> 

<div class="paging"> 
    <a href="#" rel="1" title="image 1">&nbsp;</a> 
    <a href="#" rel="2" title="image 2">&nbsp;</a> 
    <a href="#" rel="3" title="image 3">&nbsp;</a> 
    <a href="#" rel="4" title="image 4">&nbsp;</a> 
</div> 

plz幫助。

Answer 1

我認爲問題在於它在rotate函數中選擇$next。它基本上是循環顯示圖像並忽略與用戶選擇相對應的triggerID。所以，用戶第一次點擊其中一個頁面時，它會失去同步。

我能夠通過更換這行來解決這個問題：

var $next = $activeImg.next().length ? $activeImg.next() : $('.image_reel img:first'); 

與這兩個：

// get the corresponding image index from the triggerID (0-based!) 
var imgIndex = parseInt(triggerID)-1; 
// use the ":nth" selector to get the correct image 
var $next = $('.image_reel img:nth(' + imgIndex + ')'); 

的圖像和用戶所選尋呼現在保持同步。