问题

When ever I try to click on the image, the image changes but the next image in the array is not displayed

<!doctype html>
<html>
    <head>
        <title>
            slides
        </title>
        <script type="text/javascript">
            function nextslide(){
                var images = new Array()
                images[0]= "home.jpg" 
                images[1]= "left.jpg"
                images[2]= "right.jpg"
                var currentpic=0
                var lastpic= images.lenth-1;
             if (currentpic =lastpic)
             {
                currentpic=0;
                document.getElementById('slide').src = images[currentpic];
             }else
              {
                currentpic++;
                document.getElementById('slide').src = images[currentpic];
              }
            }
        </script>   
    </head>
        <body>
            <img src="home.jpg" id="slide" onclick="nextslide()">
        </body>

</html>

Help would be greatly appreciated. Thank you for the help.

回答1:

There are several things wrong with your code. Here is the fixed version:

<!doctype html>
<html>
    <head>
        <title>slides</title>
        <script type="text/javascript">
            var images = new Array();
            images[0] = "home.jpg";
            images[1] = "left.jpg";
            images[2] = "right.jpg";
            var currentpic = 0;
            var lastpic = images.length-1;
            function nextslide()
            {
                if (currentpic == lastpic)
                {
                    currentpic = 0;
                    document.getElementById('slide').src = images[currentpic];
                }
                else
                {
                    currentpic++;
                    document.getElementById('slide').src = images[currentpic];
                }
            }
        </script>   
    </head>
    <body>
        <img src="home.jpg" id="slide" onclick="nextslide()">
    </body>
</html>

What's wrong?

var lastpic= images.lenth-1; You're missing a g in length.
if (currentpic =lastpic) To check if var1 is the same as var2, you need to use == instead of =
You're missing a couple of semicolons.
You should declare currentpic, images, and lastpic outside of your function to make it actually set the image as the next image.

To try and debug yourself

Always check your browser's developer console for errors.

回答2:

try this

1.) Specify globallythis variable

 var currentpic=0;

2.) Change in images.lenth to images.length

3.) Change if (currentpic =lastpic) to if (currentpic ==lastpic)

<!doctype html>
<html>
    <head>
        <title>
            slides
        </title>
        <script type="text/javascript">
          var currentpic=0;
            function nextslide(){
                var images = new Array()
                images[0]= "http://thewowstyle.com/wp-content/uploads/2015/04/Cartoon.jpg" 
                images[1]= "http://vignette2.wikia.nocookie.net/epicrapbattlesofhistory/images/1/10/Penguin-cartoon.png/revision/latest?cb=20141207223335"
                images[2]= "http://cliparts.co/cliparts/kiK/Byz/kiKByzxoT.jpg"

                var lastpic= images.length-1;
             if (currentpic ==lastpic)
             {
                currentpic=0;
                document.getElementById('slide').src = images[currentpic];
             }else
              {
                currentpic++;
                document.getElementById('slide').src = images[currentpic];
              }
            }
        </script>   
    </head>
        <body>
            <img src="home.jpg" id="slide" onclick="nextslide()">
        </body>

</html>

来源：https://stackoverflow.com/questions/30658059/changing-images-using-on-click-with-arrays-in-javascript

标签

javascript

html

onclick

Changing images using on click with arrays in javascript

问题

回答1:

What's wrong?

To try and debug yourself

回答2: