Snorlax Snorlax - 4 months ago 13
jQuery Question

Javascript: Looping Through Images

I have an array of images that I want to loop through infinitely but I can't seem to get the logic down, this is my attempt:

http://jsfiddle.net/jzhang172/RwjFX/4/



var imagesArray = ["http://vignette2.wikia.nocookie.net/pokemon/images/e/ef/025Pikachu_Pokemon_Mystery_Dungeon_Red_and_Blue_Rescue_Teams.png/revision/latest?cb=20150105233050",
"http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png",
"http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png",
"http://www.pokemonxy.com/_ui/img/_en/art/Fennekin-Pokemon-X-and-Y.jpg",
"http://www.pokemon20.com/assets/img/mythical/arceus/poke_arceus.png"];

var count = 0;


var loopImages = function(count){

$('#firstStar').fadeIn(1500, function(){

if (count=0){
$('img').attr('src', imagesArray[1]);
}

$('#firstStar').delay(4000).fadeOut(1500, loopImages(count));
});
count++;
console.log('Ending Count:'+count);
}


loopImages(count); //Step 1: Initiate Loop, passing count, starting at 0;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://www.kingdomhearts.com/2_8/images/logos/kingdom_hearts_birth_by_sleep_logo.png" id="firstStar">




Answer

I have edited the code to make it work: http://jsfiddle.net/RwjFX/5/

In particular, see usage of the modulo (%) operator and the .bind function.