Changing images using on click with arrays in java

2019-09-18 15:46发布

问题:

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?

  1. var lastpic= images.lenth-1; You're missing a g in length.
  2. if (currentpic =lastpic) To check if var1 is the same as var2, you need to use == instead of =
  3. You're missing a couple of semicolons.
  4. 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>