jQuery图像交叉渐变器问题

Question

我有一个图像切换器淡入/淡出（它将交叉淡入淡出 iamges - auto(1 - x)）和一个寻呼机，但我无法让图像旋转监听寻呼机上的点击动作，当点击寻呼机时，图像将不要只看具体的图片。

问题在于 rotate 函数，triggerID 将保存当前 pager-element 的“rel” num，它相当于图像“list” num，所以当点击 pager 时, triggerID 将显示被点击的 rel 号...我可以用它来显示图像吗

这是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>

请帮忙。

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 + ')');

图像和用户选择的分页现在将保持同步。