JavaScript点击图片切换
时间: 2023-07-18 07:31:08 浏览: 59
可以通过以下代码实现点击图片切换:
HTML代码:
```html
<img src="image1.jpg" id="myImage" onclick="changeImage()" />
```
JavaScript代码:
```javascript
function changeImage() {
var image = document.getElementById("myImage");
if (image.src.match("image1")) {
image.src = "image2.jpg";
} else {
image.src = "image1.jpg";
}
}
```
当用户点击图片时,`changeImage()`函数将被调用。函数将获取图片元素的引用,并检查其源文件。如果源文件与“image1”匹配,则将其更改为“image2”,否则将其更改为“image1”。
相关问题
JavaScript点击多张图片切换
可以通过以下代码实现点击多张图片切换:
HTML代码:
```html
<img src="image1.jpg" class="myImages" onclick="changeImage(this)" />
<img src="image2.jpg" class="myImages" onclick="changeImage(this)" />
<img src="image3.jpg" class="myImages" onclick="changeImage(this)" />
```
JavaScript代码:
```javascript
function changeImage(img) {
var images = document.getElementsByClassName("myImages");
for (var i = 0; i < images.length; i++) {
if (images[i].src === img.src) {
if (i === images.length - 1) {
images[0].click();
} else {
images[i + 1].click();
}
break;
}
}
}
```
当用户点击任何一个图片时,`changeImage()`函数将被调用。函数将获取所有图片元素的引用,并找到与被点击的图片相匹配的那个。然后它将检查是否是最后一张图片,如果是,则将第一张图片设置为下一个要显示的图片。否则,它将设置下一张图片为要显示的图片。最后,它将调用下一个要显示的图片的`click()`方法,以触发相应的点击事件。这样就可以实现多张图片的切换了。
html点击图片切换图片
可以使用JavaScript来实现图片的点击切换。
首先,在HTML中,需要给图片添加一个id和一个onclick事件,代码如下:
```html
<img id="myImage" src="image1.jpg" onclick="changeImage()">
```
然后,需要在JavaScript中定义一个函数,用来切换图片。在这个函数中,我们可以使用if语句来判断当前显示的图片,然后根据判断结果来切换图片。代码如下:
```javascript
function changeImage() {
var image = document.getElementById("myImage");
if (image.src.match("image1")) {
image.src = "image2.jpg";
} else {
image.src = "image1.jpg";
}
}
```
这个函数会获取图片元素,然后判断当前显示的图片是不是image1.jpg,如果是,则将图片的src属性设置为image2.jpg,否则将其设置为image1.jpg。
完整的HTML和JavaScript代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>点击图片切换图片</title>
<script>
function changeImage() {
var image = document.getElementById("myImage");
if (image.src.match("image1")) {
image.src = "image2.jpg";
} else {
image.src = "image1.jpg";
}
}
</script>
</head>
<body>
<img id="myImage" src="image1.jpg" onclick="changeImage()">
</body>
</html>
```
这样,当点击图片时,就会切换显示的图片。