点击导航栏切换多张图片代码
时间: 2023-09-13 20:05:11 浏览: 36
好的,这个问题稍微复杂一些,需要用到数组和循环来实现。以下是一个示例代码:
HTML:
```html
<nav>
<ul>
<li><a href="#" onclick="changeImage(0)">Image 1</a></li>
<li><a href="#" onclick="changeImage(1)">Image 2</a></li>
<li><a href="#" onclick="changeImage(2)">Image 3</a></li>
</ul>
</nav>
<img src="image1.jpg" id="myImage">
```
JavaScript:
```javascript
var images = ["image1.jpg", "image2.jpg", "image3.jpg"];
function changeImage(index) {
var image = document.getElementById("myImage");
image.src = images[index];
}
```
这段代码会在点击导航栏中的链接时,切换图片的显示。首先定义了一个 `images` 数组,用于存储所有的图片名称。每个链接都有一个 `onclick` 事件,当点击链接时,会调用 `changeImage` 函数,并传递对应的图片索引作为参数。`changeImage` 函数会获取 `id` 为 `myImage` 的图片元素,然后将其 `src` 属性设置为对应索引的图片名称。这样就可以通过导航栏来切换多张图片了。
需要注意的是,数组的索引是从0开始的,所以在调用 `changeImage` 函数时,传递的参数应该是从0开始的索引。