在 javascript 中使用数组点击更改图像

Question

每当我尝试点击图片时，图片都会发生变化，但不会显示数组中的下一张图片

<!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>

将不胜感激。谢谢你的帮助。

Answer 1

您的代码有几处错误。这是固定版本：

<!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>

怎么了？

var lastpic= images.lenth-1; 您在 length 中缺少一个 g。
if (currentpic =lastpic) 要检查 var1 是否与 var2 相同，您需要使用 == 而不是 =
你少了几个分号。
您应该在您的函数之外声明 currentpic、images 和 lastpic，以使其真正将图像设置为下一张图像。

自己尝试调试

经常检查浏览器的开发者控制台是否有错误。

Answer 2

试试这个

1.) 全局指定this变量

 var currentpic=0;

2.) 将 images.lenth 更改为 images.length

3.) 将 if (currentpic =lastpic) 更改为 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>

在 javascript 中使用数组点击更改图像

Changing images using on click with arrays in javascript

html

javascript

onclick

怎么了？

自己尝试调试