How to click through images stored in var in javascript

Question

I need to on the click of the first image, for it to switch to the second image, and then on the click of that to switch to the third image and so on and so on.

I have this so far, and it only goes to the second image and stops there, or goes instantly to the third...

<img id="imgClickAndChange" class="art_shop" name="pic"     src="images/edited_images/1.jpg" style="display: none;"     onClick="changeImage();changeImageAgain();">

<script language="javascript">
function changeImage() {

    if (document.getElementById("imgClickAndChange").src =     "images/edited_images/1.jpg") 
    {
        document.getElementById("imgClickAndChange").src =     "images/edited_images/2.jpg";
    }
}
</script>

<script language="javascript">
function changeImageAgain() {
if (document.getElementById("imgClickAndChange").src ==           "images/edited_images/2.jpg") 
    {
    document.getElementById("imgClickAndChange").src =           "images/edited_images/3.jpg";
    }

}
</script>

I have also this example, which i pulled from another thing i did a while ago. It's an image slider, with the images already stored in the header, and they load the new image in every X seconds. Is there any way to modify this to load the next image on the click of a button (or the image itself) as opposed to it being timed? Either solution would work. Thanks

<head>
    <script type="text/javascript">
var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "images/edited_images/1.jpg" // set image src property         to image path, preloading image in the process
slideimages[1] = new Image()
slideimages[1].src = "images/edited_images/2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "images/edited_images/3.jpg"
slideimages[3] = new Image()
slideimages[3].src = "images/edited_images/4.jpg"
</script>
</head>


<img id="imgClickAndChange" class="art_shop" name="pic"     src="images/edited_images/1.jpg" style="display: none;"     onClick="changeImage();changeImageAgain();">


<script type="text/javascript">

//variable that will incement through the images

var step=0

function slideit(){
if (!document.images)
    return
document.getElementById('imgClickAndChange').src = slideimages[step].src
if (step<1)
    document.getElementById('imgClickAndChange').src = slideimages[step].src
if (step<2)
    document.getElementById('imgClickAndChange').src = slideimages[step].src
 if (step<3)
    step++
 else
    step=0
setTimeout("slideit()",1000)
}

slideit()

</script>

Answer 1

You can make it much simpler. Also I would not recommend preloading the images as it slows down your pageload.

Try this: EDIT: without looping

<img id="imgClickAndChange" class="art_shop" name="pic" onClick="changeImage()">

<script>

// image sources in array. image[0] will have first image src, image[3] will have last src
var images = [
  "images/edited_images/1.jpg",
  "images/edited_images/2.jpg",
  "images/edited_images/3.jpg",
  "images/edited_images/4.jpg"
]

var step = 0;
changeImage(); // set first image src after page loads

function changeImage() {
  // exit if no images, or step = number of items in array (4)
  if (typeof images == "undefined" ||  step == images.length) return;     

  document.getElementById('imgClickAndChange').src = images[step];
  step++;
}
</script>

How to click through images stored in var in javascript

Question

1 answers

solution1
0 ACCPTED 2016-04-16 10:05:13

How to click through images stored in var in javascript

Question

1 answers

solution1 0 ACCPTED 2016-04-16 10:05:13

solution1
0 ACCPTED 2016-04-16 10:05:13