JavaScript改变图片路径及问题

时间:2024-10-14 15:39:52

1、我们主要使用按钮来实现操作。如图所示。

JavaScript改变图片路径及问题

2、我们需要先设置一张默认的图片。如图所示。

JavaScript改变图片路径及问题

3、现在我们来写一个点击按钮的效果,但是首先我们要给图片设一个id。然后在按钮的点击效果中定位到我们的图片并且改变图片路径。

JavaScript改变图片路径及问题

4、我们对其他按钮执行相同操作。接下来我们运行一下。

JavaScript改变图片路径及问题
JavaScript改变图片路径及问题

5、我们发现显示出来的图片太大,不方便我们观看。所以我们将所有图片的宽度都设置的小一点。

JavaScript改变图片路径及问题
JavaScript改变图片路径及问题

6、那么我们在点击按钮时,发现并没有出现我们想要的效果。说明我们是有一些地方写错了的。我们可以点击Ctrl+Shift+i键来调出我们的调试台发现有这样一个错误。

JavaScript改变图片路径及问题

7、错误显示我们的img没有被定义,然后返回我们的代码,我们发现设置的默认图片是定义好的,但是路径的改变出现了问题。我们这里的路径并没有被用引号包起来,所以系统就认为img是变量而且没有被定义。

JavaScript改变图片路径及问题

8、我们只需要把路径用引号包起来就可以解决问题啦。我们点击第五张图片的按钮就出现了相应的图片。

JavaScript改变图片路径及问题
JavaScript改变图片路径及问题
© 手抄报圈