1

I need help creating image arrays using JavaScript. I need to create an array of images to cycle through using their src attribute to cycle through them. Then the images need to be cycled to the next and previous buttons. the images must loop through the cycle. In other words don’t have them end. when clicking next, once you hit the end of your images, they should just start back at the first image and repeat.

Could someone please write a simple code for this? I would really appreciate it.

Ingrid
  • 11
  • 2
  • Are you trying to create a slider? – Aadit M Shah Dec 10 '12 at 06:25
  • a slider but using an array something like this var imgArray = new Array(); imgArray[0] = new Image(); imgArray[0].src = 'bird.jpg'; imgArray[1] = new Image(); imgArray[1].src = 'rose.jpg'; imgArray[2] = new Image(); imgArray[2].src = 'cow.jpg'; imgArray[3] = new Image(); imgArray[3].src = 'dog.jpg'; – Ingrid Dec 10 '12 at 06:29
  • If you're trying to create the slider then see this [fiddle](http://jsfiddle.net/SyTFZ/4/). After you've read it and tried to understand it, then tell us how we may help. – Aadit M Shah Dec 10 '12 at 06:30
  • 1
    You may also want to read this answer: http://stackoverflow.com/a/12926811/783743 – Aadit M Shah Dec 10 '12 at 06:32
  • the slider is similar to what i am looking for..but using images and the next/prev buttons. It looks like i can spend 5 hrs trying to figure this out, but i feel like there's got to be simpler code:/ – Ingrid Dec 10 '12 at 06:47

1 Answers1

0

I was bored and I hadn't built one of these before. Here is what I came up with: http://jsfiddle.net/grantk/pHdAN/

<div id="images" style="height:300px;">
    <img src="http://www.livehacking.com/web/wp-content/uploads/2012/08/chrome-logo-1301044215-300x300.jpg" />
    <img src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png" />
    <img src="http://html5doctor.com/wp-content/uploads/2011/01/HTML5_Logo_256.png" />
</div>
<a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a>

<script>
var imgArr = document.getElementById('images').getElementsByTagName('img');

//Hide all images except first
for(var i=1; i<imgArr.length; i++){
    imgArr[i].style.display = "none";
}
i=0;

document.getElementById('prev').onclick = function(){
    if(i===0){
        imgArr[i].style.display = "none";
        i=imgArr.length-1;
        imgArr[i].style.display = "";
    }
    else{
        imgArr[i].style.display = "none";
        i--;
        imgArr[i].style.display = "";
    }
}

document.getElementById('next').onclick = function(){
    if(i===imgArr.length-1){
        imgArr[i].style.display = "none";
        i=0;
        imgArr[i].style.display = "";
    }
    else{
        imgArr[i].style.display = "none";
        i++;
        imgArr[i].style.display = "";
    }
}
</script>
gkiely
  • 2,987
  • 1
  • 23
  • 37
  • thank you for the reply! Is there a way to make the images loop? and instead of the div use array that holds these images? – Ingrid Dec 10 '12 at 19:17