html帮实现一个生成8个图片并且每个要点击事件,点击指向哪个歌曲
时间: 2024-03-20 10:41:24 浏览: 18
可以使用以下代码实现:
首先在 HTML 中添加一个包含 8 个 img 标签的容器,并为每个标签设置 id 和点击事件:
```html
<div id="image-container">
<img id="image1" src="image1.jpg" onclick="playSong('song1.mp3')">
<img id="image2" src="image2.jpg" onclick="playSong('song2.mp3')">
<img id="image3" src="image3.jpg" onclick="playSong('song3.mp3')">
<img id="image4" src="image4.jpg" onclick="playSong('song4.mp3')">
<img id="image5" src="image5.jpg" onclick="playSong('song5.mp3')">
<img id="image6" src="image6.jpg" onclick="playSong('song6.mp3')">
<img id="image7" src="image7.jpg" onclick="playSong('song7.mp3')">
<img id="image8" src="image8.jpg" onclick="playSong('song8.mp3')">
</div>
```
其中,每个 img 标签的 src 属性为对应的图片路径,onclick 属性为点击事件,调用一个名为 playSong 的函数,并传入对应的歌曲路径作为参数。
接着在 JavaScript 中定义 playSong 函数,用于播放对应的歌曲:
```javascript
function playSong(songPath) {
var audio = new Audio(songPath);
audio.play();
}
```
完整的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>点击播放音乐</title>
</head>
<body>
<div id="image-container">
<img id="image1" src="image1.jpg" onclick="playSong('song1.mp3')">
<img id="image2" src="image2.jpg" onclick="playSong('song2.mp3')">
<img id="image3" src="image3.jpg" onclick="playSong('song3.mp3')">
<img id="image4" src="image4.jpg" onclick="playSong('song4.mp3')">
<img id="image5" src="image5.jpg" onclick="playSong('song5.mp3')">
<img id="image6" src="image6.jpg" onclick="playSong('song6.mp3')">
<img id="image7" src="image7.jpg" onclick="playSong('song7.mp3')">
<img id="image8" src="image8.jpg" onclick="playSong('song8.mp3')">
</div>
<script>
function playSong(songPath) {
var audio = new Audio(songPath);
audio.play();
}
</script>
</body>
</html>
```
这样就可以生成 8 个图片,并为每个图片添加点击事件,点击图片可以播放对应的歌曲。