CODEWITHSUNDEEP
javascriptimageloopsbutton
alexnewby
alexnewby

Reputation: 61

Prev and Next buttons switch images (links to images) in array???

These are the instructions:

"Have an image and two buttons, PREV and NEXT. Have 10 images in an array. When you click on NEXT, the next picture should display and when you click on PREV, the previous image should display."

This is what I wrote so far: 

<html>
<head>
    <title>Image Loop</title>
</head>
<body>
    <img src="http://placekitten.com/500/200" id="image" style="height:150px; width:150px" />
    <input type="button" value="Prev" name="previous_picture" onclick= nextImage();>
    <input type="button" value="Next" name="next_picture"/>
    <script>
        function nextImage () {
            var i = images.indexOf();
            var imageSrc = document.getElementById("image").src=images[i];
            for (i = weekdays.indexOf(day); i<weekdays.length; i++)
        }

        function prevImage () {

        }
        var images = new Array(
            "http://placekitten.com/500/200",
            "http://placekitten.com/499/200",
            "http://placekitten.com/501/200",
            "http://placekitten.com/500/199"
            );
    </script>

</body>
</html>

* the image should loop back around when it gets to the end of the array. I just don't know what I'm doing... :( *

Upvotes: 1

Views: 4928

Answers (4)

Dan
Dan

Reputation: 1237

You can accomplish it by using the following code

<script language="JavaScript" type="text/JavaScript">

var imgArray = new Array(
"11011_1.jpg","11011_2.jpg","11011_3.jpg","11011_4.jpg","11011_5.jpg"
);

baseURL = "http://www.planet99.com/pix";
numImages = 5;
curImage = 1;

function f_slideshow( xflip ) {
curImage = curImage + xflip;
if (curImage > numImages)
{ curImage = 1 ; } 
if (curImage == 0)
{ curImage = numImages ; } 
document.images[2].src = baseURL + '/' + imgArray[curImage - 1];
}


</script>


Click on the buttons to flip through the photos - allow a few seconds for 
each photo to load.


<input type="button" value="<< Prev" name="cb_prev" 
onclick="f_slideshow(-1)">
<input type="button" value="Next >>" name="cb_next" 
onclick="f_slideshow(1)">

<img src='http://www.planet99.com/pix/11011_1.jpg'>

Upvotes: 0

Pieter21
Pieter21

Reputation: 1845

Jsfiddle of a solution, using a small bit of jquery:

https://jsfiddle.net/cchhymtx/

Javascript:

var images = new Array(
    "http://placekitten.com/500/200",
    "http://placekitten.com/499/200",
    "http://placekitten.com/501/200",
    "http://placekitten.com/500/199");

function getCurrentImageIndex() {
    return images.indexOf(document.getElementById("image").src);
}

function next() {
    nextImage = (getCurrentImageIndex() + 1) % images.length;
    document.getElementById("image").src = images[nextImage];
}

function prev() {
    nextImage = (getCurrentImageIndex() - 1 + images.length) % images.length;
    document.getElementById("image").src = images[nextImage];
}

Upvotes: 1

Kip
Kip

Reputation: 558

You have a few things off here.

To start with, take a look at how Array.indexOf() works: http://www.w3schools.com/jsref/jsref_indexof_array.asp

What are you trying to attempt with:
for (i = weekdays.indexOf(day); i<weekdays.length; i++)

After you find the index of the picture that is current, if index+1 would be greater than or equal to the length of the images array, then set index to 0.

Upvotes: 0

Pieter21
Pieter21

Reputation: 1845

Do some more investigations, this really shows too little effort.

I'll give you some pointers.

Javascript: Generic get next item in array

Javascript knows the modulus operation: https://msdn.microsoft.com/nl-nl/library/9f59bza0(v=vs.94).aspx

prev = (index + length - 1 ) % length

next = (index + 1 ) % length

prev needs prevImage() and next needs nextImage() functions

etc.

Upvotes: 1

Related Questions