jQuery image scroller - continuous loop
I have coded a basic image scroller that randomly positions images (in a ) and then lets you use two buttons to animate then left and right.
So far, everything works nicely, I have each image moving at a different speed, and when you stop hoving over the button, everything stops.
But one last feature I would like if for the images to "loop" back, so if they leave the left edge, they re-appear to the right and vice-versa.
Is this possible?
Here is my code:
<script type="text/javascript">
$(document).ready(function() {
$('.Product_List li').each(function() {
$(this).css('left', Math.floor(Math.random() * 1280));
$(this).css('top', Math.floor(Math.random() * 200));
var $speed = Math.floor(Math.random()*1000000);
$(this).animate({left: "+=1280px"}, $speed, 'linear');
});
$('.moveLeft').hover(
function() {
$('.Product_List li').stop();
$('.Product_List li').each(function() {
var $speed = Math.floor(Math.random()*1000000);
$(this).animate({left: "-=1280px"}, $speed, 'linear');
});
},
function() {
$('.Product_List li').stop();
}
);
$('.moveRight').hover(
function() {
$('.Product_List li').stop();
$('.Product_List li').each(function() {
var $speed = Math.floor(Math.random()*100000);
$(this).animate({left: "+=1280px"}, $speed, 'linear');
});
},
function() {
$('.Product_List li').stop(开发者_开发技巧);
}
);
});
</script>
Hope someone can shed some light on my request!
精彩评论