CODEWITHSUNDEEP
javascriptloopsimage-gallery
user1607957
user1607957

Reputation: 1

trying to get simple javascript gallery with next and previous buttons to loop back to the beginning

im fairly new to javascript, but im basically trying to make a next/previous click through gallery. I've managed to find tutorials and bits to get images to click through. however i cant seem to work out how to return to the beginning of the series after the 4th(final) image.

this is what i have so far-

<script type="text/javascript">

 var photos=new Array()
 var which=0
 photos[0]='images/image1.jpg'
 photos[1]='images/image2.jpg'
 photos[2]='images/image3.jpg'
 photos[3]='images/image4.jpg'

 function backward(){
    if (which > 0){
        which=which-1
        document.images.photoslider.src=photos[which]
    }
 }

 function forward(){
     if (which<photos.length-1){
        which=which+1
        document.images.photoslider.src=photos[which]
     }
 }

 </script>

 <form>
     <input type="button" value="&lt;&lt;Back" onClick="backward()"> 
     <input type="button" value="Next&gt;&gt;" onClick="forward()">
 </form>

essentially I want the buttons to create a continuous loop through the 4 images. I know there is going to be a simple solution I just cant see it. Any help would be great! thank you in advance!

Upvotes: 0

Views: 11610

Answers (3)

harsh
harsh

Reputation: 1

<!DOCTYPE html>
<html>
<body>


<p> click on the button to change the image</p>

     <input type="button" value="&lt;&lt;Back" onClick="backward()"> 

     <img src = "youtube.png" value = "PREVIOUS" id = "prev">


     <input type="button" value="Next&gt;&gt;" onClick="forward()">





<script>

var photos = new Array()
 var i=0
 photos[0]='youtube.png';    //enter the path of the image here
 photos[1]='facebook.png';
 photos[2]='twitter.png';
 photos[3]='sirius_logo_sm.gif';


function backward(){
    if (i>0){
     i=i-1;
    } else {
     i=photos.length-1;
    }
    document.getElementById("prev").src=photos[i];
 }

 function forward()
 {
    if (i<photos.length-1){
     i=i+1;
    } else {
     i=0;
    }
 document.getElementById("prev").src=photos[i]; }


</script>
</body>
</html>

Upvotes: 0

BaroqueBobcat
BaroqueBobcat

Reputation: 10150

You could do this:

function backward() {
    if (which <= 0) {
        which = photos.length - 1;
    } else {
        which--;
    }
    document.images.photoslider.src=photos[which];
 }

 function forward(){
     which = (which + 1) % photos.length;               //  modulus keeps which within
     document.images.photoslider.src=photos[which];     // the bounds, while incrementing
 }

going backward, if which is 0 or less, jump to the last photo. Going forward, if which + 1 == photos.length, the modulus will zero it out, looping you back to the beginning.

Upvotes: 2

tuxtitlan
tuxtitlan

Reputation: 1048

 function backward(){
    if (which>0){
     which=which-1;
    } else {
     which=photos.length-1;
    }
    document.images.photoslider.src=photos[which];
 }

 function forward(){
    if (which<photos.length-1){
     which=which+1;
    } else {
     which=0;
    }
   document.images.photoslider.src=photos[which];
 }

tada!

Upvotes: 0

Related Questions