jQuery Bild Crossfader Problem

Question

Ich habe ein Bild Switcher FadeIn / heraus (es wird iamges überzublenden - auto (1 - x)) und ein Pager, aber ich kann verwalten, um die Bilddrehung machen hören, um die Klick-Aktion auf Pager, wenn auf Pager das Bild geklickt wird Jup tu das spezifische img NICHT.

Das Problem ist in der Drehfunktion die triggerID das „rel“ num des aktuellen Pager-Elements halten, die das äquivalent zu dem Bild „Liste“ num ist, so dass, wenn auf dem Pager geklickt , die triggerID die rel Nummer an, auf den geklickt wurde ... kann ich das verwenden um das Bild anzuzeigen

Hier ist der Code für 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
});

Der HTML-Code:

<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 help.

Answer 1

Ich denke, die Frage ist, wo es $next in der rotate Funktion ist die Auswahl. Es ist Radfahren im Grunde durch die Bilder und die triggerID ignorieren, die die Auswahl des Benutzers entspricht. Also, das erste Mal, klickt der Benutzer auf eine der Seiten, wird es mehr synchron aus.

Ich war in der Lage, es zu beheben, indem Sie diese Zeile zu ersetzen:

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

mit diesen beiden:

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

Das Bild und der Benutzer ausgewählte Paging wird nun synchron bleiben.