iepaul
asked on
create an infinite loop in jquery
I am learning javascript and jquery and I am trying to create what I thought would be very simple loop. I am fading background images in and out and looping through six images but when I run my code the browser becomes non responsive.
<script type="text/javascript">
var aImages = new Array();
var imageNum = 0;
aImages[0] = "img/limerick.jpg";
aImages[1] = "img/launch.jpg";
aImages[2] = "img/graduates.jpg";
aImages[3] = "img/portrait.jpg";
aImages[4] = "img/wedding.jpg";
aImages[5] = "img/engagement.jpg";
aImages[6] = "img/wedding2.jpg";
$(document).ready(function() {
while (imageNum < 10) {
if (imageNum > 6) {
imageNum = 0;
}
$("img#bg").attr("src", aImages[imageNum]);
$("img#bg").load
$("img#bg").fadeIn(1000);
setTimeout(function() {$("img#bg").fadeOut(1000);},3000);
imageNum ++;
}
});
</script>
<script type="text/javascript">
var aImages = new Array();
var imageNum = 1;
aImages[0] = "img/limerick.jpg";
aImages[1] = "img/launch.jpg";
aImages[2] = "img/graduates.jpg";
aImages[3] = "img/portrait.jpg";
aImages[4] = "img/wedding.jpg";
aImages[5] = "img/engagement.jpg";
aImages[6] = "img/wedding2.jpg";
$(document).ready(function () {
while (imageNum < 7) {
$("img#bg").attr("src", aImages[imageNum]);
$("img#bg").load
$("img#bg").fadeIn(1000);
setTimeout(function() {$("img#bg").fadeOut(1000) ;},3000);
imageNum ++;
}
});
</script>
var aImages = new Array();
var imageNum = 1;
aImages[0] = "img/limerick.jpg";
aImages[1] = "img/launch.jpg";
aImages[2] = "img/graduates.jpg";
aImages[3] = "img/portrait.jpg";
aImages[4] = "img/wedding.jpg";
aImages[5] = "img/engagement.jpg";
aImages[6] = "img/wedding2.jpg";
$(document).ready(function
while (imageNum < 7) {
$("img#bg").attr("src", aImages[imageNum]);
$("img#bg").load
$("img#bg").fadeIn(1000);
setTimeout(function() {$("img#bg").fadeOut(1000)
imageNum ++;
}
});
</script>
<script type="text/javascript">
var aImages = new Array();
var imageNum = 1;
aImages[0] = "img/limerick.jpg";
aImages[1] = "img/launch.jpg";
aImages[2] = "img/graduates.jpg";
aImages[3] = "img/portrait.jpg";
aImages[4] = "img/wedding.jpg";
aImages[5] = "img/engagement.jpg";
aImages[6] = "img/wedding2.jpg";
$(document).ready(function() {
setTimeout(changeimg,3000)
});
function changeimg(){
var img = $("img#bg");
img.fadeOut(1000);
if(++imageNum==7)imageNum=0;
img.attr("src", aImages[imageNum]).load().fadeIn(1000);
}
</script>
ASKER
eyal thanks your for your code but it does not appear to loop. it displays the first image then stops.
Problem lies in line 12 to 15.
Exit condition of the loop is imageNum = 10, but when it is 7, you reset it --> the loop will never end.
Use either suggestion of Pratima or Eyal is fine :)
Exit condition of the loop is imageNum = 10, but when it is 7, you reset it --> the loop will never end.
Use either suggestion of Pratima or Eyal is fine :)
ASKER
i want to keep the infinite loop. the exit condition is never expected to be met. the problem is the browser becomes no responsive.
callMeAgainLater();
function callMeAgainLater()
{
...your code here...
setTimeout( "callMeAgainLater()", 1000 );
}
above code will keep on looping
function callMeAgainLater()
{
...your code here...
setTimeout( "callMeAgainLater()", 1000 );
}
above code will keep on looping
<script type="text/javascript">
var aImages = new Array();
var imageNum = 1;
aImages[0] = "img/limerick.jpg";
aImages[1] = "img/launch.jpg";
aImages[2] = "img/graduates.jpg";
aImages[3] = "img/portrait.jpg";
aImages[4] = "img/wedding.jpg";
aImages[5] = "img/engagement.jpg";
aImages[6] = "img/wedding2.jpg";
$(document).ready(function() {
setTimeout(changeimg,3000)
});
function changeimg(){
var img = $("img#bg");
img.fadeOut(1000);
if(++imageNum==7)imageNum=0;
img.attr("src", aImages[imageNum]).load().fadeIn(1000);
setTimeout(changeimg,3000)
}
</script>
ASKER
Eyal that code works but strange things are happening with the pictures. A picture appears, fades out, then fades in again. The next picture appears, fades out and fades in again.
It does loop correctly though.
It does loop correctly though.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
http://www.w3schools.com/js/js_timing.asp