我有一个图像切换器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"> </a>
<a href="#" rel="2" title="image 2"> </a>
<a href="#" rel="3" title="image 3"> </a>
<a href="#" rel="4" title="image 4"> </a>
</div>
帮助。
答案 0 :(得分: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 + ')');
图像和用户选择的分页现在将保持同步。