做一个带图片的网页js
时间: 2024-09-06 08:04:39 浏览: 28
在HTML中创建一个带有图片的网页并使用JavaScript来控制图片,首先需要一个基本的HTML结构,然后在其中嵌入JavaScript代码来操作图片。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片操作示例</title>
</head>
<body>
<img id="myImage" src="example.jpg" alt="示例图片" width="200">
<button onclick="changeImage()">更换图片</button>
<script>
// JavaScript函数用于更换图片
function changeImage() {
// 读取图片元素
var image = document.getElementById('myImage');
// 更换图片源地址
image.src = 'new-example.jpg';
}
</script>
</body>
</html>
```
在这个例子中,我们首先在HTML中定义了一个`<img>`标签,该标签有一个ID是`myImage`,并且在页面加载时会显示一个名为`example.jpg`的图片。我们还添加了一个按钮,当用户点击这个按钮时,会触发`changeImage`函数。在`<script>`标签中定义了`changeImage`函数,该函数会找到ID为`myImage`的图片元素,并将它的`src`属性更换为`new-example.jpg`。
通过这种方式,你可以用JavaScript实现更多关于图片的动态效果,比如图片轮播、动态添加图片等。