Проблема кроссфейдера изображения jQuery - PullRequest
Новая
       19

Проблема кроссфейдера изображения jQuery

1 голос
/ 13 марта 2010

У меня есть переключатель изображения fadein / out (он будет затенять iamges - auto (1 - x)) и пейджер, но я не могу заставить вращение изображения слушать действие щелчка на пейджере, при нажатии на пейджер изображение НЕ jup tu конкретный img.

Проблема в функции rotate . TriggerID будет содержать «rel» номер текущего элемента пейджера, который эквивалентен номеру «list» изображения, поэтому при нажатии на пейджер, идентификатор триггера покажет номер рэла, по которому щелкнули ... могу ли я использовать его для отображения изображения

Вот код для 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 помощь.

1 Ответ

1 голос
/ 13 марта 2010

Я думаю, проблема в том, что он выбирает $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 + ')');

Изображение и выбранный пользователем пейджинг теперь будут синхронизированы.

...