change方法设置点击数字显示对应图片以及用nect设置索引的代码与知识点
时间: 2023-11-22 17:54:57 浏览: 21
在使用 `change` 方法设置点击数字显示对应图片时,需要先准备好对应的图片,并将图片的路径存储到一个数组中。
例如,我们有以下三张图片:
```html
<img src="1.jpg" id="img1">
<img src="2.jpg" id="img2">
<img src="3.jpg" id="img3">
```
我们可以将它们的路径存储到一个数组中:
```javascript
var imgArr = ["1.jpg", "2.jpg", "3.jpg"];
```
接着,在点击数字时,我们可以获取到该数字的索引,然后使用 `document.getElementById` 方法获取对应的图片元素,将其 `src` 属性设置为对应的图片路径即可。
完整的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>Change Image on Click</title>
<script type="text/javascript">
var imgArr = ["1.jpg", "2.jpg", "3.jpg"];
function change(num) {
var index = num - 1;
var img = document.getElementById("img");
img.src = imgArr[index];
}
</script>
</head>
<body>
<h1>Click a Number to Change Image</h1>
<ul>
<li><a href="#" onclick="change(1)">1</a></li>
<li><a href="#" onclick="change(2)">2</a></li>
<li><a href="#" onclick="change(3)">3</a></li>
</ul>
<img src="1.jpg" id="img">
</body>
</html>
```
在上面的代码中,我们使用 `onclick` 属性将点击事件绑定到了数字链接上。每次点击数字链接时,都会调用 `change` 方法,并将对应的数字作为参数传递给该方法。
在 `change` 方法中,我们根据传入的数字计算出对应的索引,然后获取图片元素,并将其 `src` 属性设置为对应的图片路径。
知识点包括:
- JavaScript 数组
- JavaScript DOM 操作
- JavaScript 函数定义与调用
- HTML 事件绑定