Question

我有一个图像切换器fadein / out（它将交叉淡化iamges - auto（1 - x））和一个寻呼机但我无法设法使图像旋转监听寻呼机上的点击动作，当点击寻呼机时图像将不要特定的img。

问题在于旋转功能，triggerID将保存当前pager-element的“rel”num，它相当于图像“list”num，因此当点击寻呼机时，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

我认为问题在于它在$next函数中选择rotate。它基本上是在图像中循环并忽略对应用户选择的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 + ')');

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

jQuery图像交叉推子问题

1 个答案: