JavaScript单击带有按钮导航的图像

Question

New to web development and trying to create a gallery of images that cycle through with the click of a "previous" and "next" button. Does anybody know how to do this? I don't think I've done anything right but I'll include what I've done so far. The idea is to make this adaptable to n indefinite number of images.

code:

 <img src= "photos/1.jpg" id="currentImage"  height="288"/>
 <button id= "prev" onclick="prevImage()" class="portfolioNavigation">Previous</button>
 <button id= "next" onclick="nextImage()" class="portfolioNavigation">Next</button>
     <script type= "text/javascript">
   var counter = 2;
   var 1 = "photos/1.jpg";
   var 2 = "photos/2.jpg";
   var 3 = "photos/3.jpg";

prev.onclick = function(){
        document.getElementById("currentImage").src = counter - 1;
        counter--;
    }
next.onclick = function(){
        document.getElementById("currentImage").src = counter + 1;
        counter++;
    }

if(counter == 3){
        counter = 0;
    };
</script>

Answer 1

There is no need of using "onclick" inside button tags.

<script type= "text/javascript">
   var counter = 2;
   var sourceUrl = "photos/" + counter + ".jpg";
   var prev = document.getElementById("prev");
   var next = document.getElementById("next");

    prev.onclick = function(){
        counter--;
        document.getElementById("currentImage").src = sourceUrl;    
    }
    next.onclick = function(){
        counter++;
        document.getElementById("currentImage").src = sourceUrl;        }

    if(counter == 3){
        counter = 0;
    };
</script>

Answer 2

There are couple of issues in your code right now. One of them is that your variables names are plain numbers. You cannot have variable names starting with numbers in JavaScript. Although not a great example, _1 is valid, image1 is a valid and even a more descriptive variable number.

Another issue is, when you are setting the src attribute of currentImage you are also setting that attribute to a value of plain number. That is not a valid image url.

You can put the photo URLs in an array and cycle through those images when next and previous buttons are pressed.

Try something like this (warning untested code):

var images = ["photos/1.jpg", "photos/2.jpg", "photos/3.jpg"];
var numImages = images.length;

prev.onclick = function(){
    document.getElementById("currentImage").src = images[(counter - 1) % numImages];
    counter--;
}

The significance of the % operator here is that it wraps around the value of [0, numImages).

Answer 3

As others have posted, you cannot use an int as a variable name.

You also had "onclick" events on each button and events set via jQuery, you just need one or the other.

Storing each src string in an array and accessing it by using "counter" will work for you. It will also allow you to use a variable amount of images.

HTML

 <img src= "photos/1.jpg" id="currentImage"  height="288"/>
 <button id= "prev" class="portfolioNavigation">Previous</button>
 <button id= "next" class="portfolioNavigation">Next</button>

JavaScript

var counter = 0;
   var srcArray = ["photos/1.jpg", "photos/2.jpg", "photos/3.jpg"];

prev.onclick = function(){
        document.getElementById("currentImage").src = srcArray[--counter];
    }
next.onclick = function(){
        document.getElementById("currentImage").src = srcArray[++counter];
    }

if(counter == 3){
        counter = 0;
    };

If you inspect the image element in this JSFiddle , you'll see the src updating correctly.