Question

我有6张可爱的小威廉姆斯的照片，我一直在研究如何在每次点击它们时更改图像。但是代码无效，请帮我确定我是否出现了逻辑或语法错误：

<html>
    <head>
        <title>SerenaWilliams</title>
    </head>
    <body>
        <img src="http://1.bp.blogspot.com/-hGUyOlpoeB0/UROyeHgMXcI/AAAAAAAAAZ4/L32zLAQvQj0/s1600/Hot-Serena-Williams+_sexy+16.jpg" id="serenaGallery" onclick="changeImage" /> 
    </body>

   <script type="text/javascript">

       function changeImage() {

           var currentImage = document.getElementById("serenaGallery").src;
           var image1 = "http://1.bp.blogspot.com/-hGUyOlpoeB0/UROyeHgMXcI/AAAAAAAAAZ4/L32zLAQvQj0/s1600/Hot-Serena-Williams+_sexy+16.jpg";
           var image2 = "http://usatthebiglead.files.wordpress.com/2011/04/serena-williams-is-big-boned.jpg";
           var image3 = "http://www.strangecosmos.com/images/content/109963.jpg";
           var image4 = "http://1.bp.blogspot.com/-HiJxcIjMmFg/UWo9JtbfCEI/AAAAAAAAF1g/aUU42F3V9Ic/s1600/Serena+Williams+Hot+2013+04.jpg";
           var image5 = "http://mystarclub.com/wp-content/uploads/2012/11/Serena-Williams-is-a-Bikini-Babe.jpg";
           var image6 = "http://1.bp.blogspot.com/-vCsx4sswzeM/UA5GtbEwJ1I/AAAAAAAAACE/tMiP_p-0rB0/s1600/serena+williams+tennis+ball+in+butt.jpg";

           if (currentImage==image1){ currentImage=image2; }
           if (currentImage==image2){ currentImage=image3; }
           if (currentImage==image3){ currentImage=image4; }
           if (currentImage==image4){ currentImage=image5; }
           if (currentImage==image5){ currentImage=image6; }
           else { currentImage=image1; }

        }

    </script>

</html>

Answer 1

首先，您需要修改 onclick 属性，以便它实际执行该功能：

onclick="changeImage()"

命令

var currentImage = document.getElementById("serenaGallery").src;

只是将图像的 source 属性存储在变量中;它没有引用它。

此外，您必须将所有if语句更改为else if，否则该函数会将image1更改为image2，然后更改为image3等。

这样可行：

var currentImage = document.getElementById("serenaGallery");

...

if (currentImage.src == image1){ currentImage.src=image2;}
else if (currentImage.src == image2){ currentImage.src=image3;}

...

最后，对图像源使用数组可以将if语句压缩为单个for循环。六张图片并不是真的需要，但如果你想添加更多图片则更好。

JavaScript：使用onClick无法正常工作来更改图像的功能。

1 个答案: