javascript setInterval fades the same image over and over rather than the next
(edit) It is supposed to rotate the fade between 3 images every 5 seconds. But rather it just fades the sam开发者_运维知识库e one over and over every 5 seconds, never going to the next image. Here's mote context because maybe the error wasn't caused by anything in the initial post:
$(".paging").show();
$(".paging a:first").addClass("active");
$(".image_reel img:first").addClass("active");
var imageWidth = $(".window").width();
var imageSum = $(".image_reel div").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging and Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
$(".image_text").animate({
left: -image_reelPosition
}, 500 );
};
//Below is part not working right
fadeImg = function(){
$("#group1 img").removeClass('active');
$next.addClass('active');
$("#group1 img").animate({
opacity: 0
}, 500 );
$next.animate({
opacity: 1
}, 500 );
};
//Rotation and Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 7 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
}, 15000); //Timer speed in milliseconds (7 seconds)
playFade = setInterval(function(){
$next = $(".image_reel img.active").next();
if($next.length === 0){
$next = $(".image_reel img:first");
}
fadeImg();
}, 5000);
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation timer
});
//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
});
markup:
<div class="image_reel">
<div id="group1">
<a href="#"><img src="images/reel_1.png" class="first" /></a>
<a href="#"><img src="images/reel_1b.png" class="second" /></a>
<a href="#"><img src="images/reel_1c.png" class="third" /></a>
<p class="first"> A</p>
<p class="second"> B</p>
<p class="third">C</p>
<div class="slidernav">
<a href="#first"> A</a>
<a href="#second"> B</a>
<a href="#third"> C</a>
</div>
</div>
</div>
Note that I am aware of plugins to create fade effects, but I'm trying to do it manually for now. Thanks for any response.
The problem is that: $next = $(".image_reel img.active").next();
does not do what you are wanting it to do. What that is doing is finding img.active
and then trying to find its next sibling, since it doesn't have any siblings $next
gets set to an empty jQuery object.
What you want is something like this:
$next = $(".image_reel img.active").parent().next().find('img');
精彩评论