1

画像スイッチャーのフェードイン/アウト（画像をクロスフェードします--auto（1-x））とページャーがありますが、ページャーをクリックすると画像がジャンプしないので、画像の回転にページャーのクリックアクションをリッスンさせることができません特定の画像。

問題は、rotate関数にあります。triggerIDは現在のページャー要素の「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>

plzヘルプ。

4

1 に答える 1

1

$next問題は、関数のどこを選択するかということだと思いrotateます。基本的には画像を循環し、ユーザーの選択に対応するtriggerIDを無視します。そのため、ユーザーが最初にページの1つをクリックすると、同期がとれなくなります。

この行を置き換えることで修正できました：

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

これらの2つで：

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

画像とユーザーが選択したページングは​​同期されたままになります。

于 2010-03-13T01:18:30.060 に答える