html通过JavaScript切换图片完整代码
时间: 2023-08-02 11:15:56 浏览: 44
以下是一个使用 JavaScript 切换图片的基本示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 切换图片示例</title>
<script>
function changeImage() {
var image = document.getElementById("myImage");
if (image.src.match("img1")) {
image.src = "img2.jpg";
} else {
image.src = "img1.jpg";
}
}
</script>
</head>
<body>
<h1>JavaScript 切换图片示例</h1>
<img id="myImage" src="img1.jpg" width="200" height="200">
<br>
<button onclick="changeImage()">切换图片</button>
</body>
</html>
```
这个代码中包含一个 `changeImage()` 函数,它会检查当前图片的源文件路径,如果是 `img1.jpg`,则将其更改为 `img2.jpg`,如果是 `img2.jpg`,则将其更改为 `img1.jpg`。在 HTML 中,我们使用 `<img>` 标签来显示图片,并在按钮上使用 `onclick` 属性来调用 `changeImage()` 函数。
相关问题
html前端动态切换图片完整代码
以下是一个简单的HTML前端动态切换图片的完整代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>前端动态切换图片</title>
<style>
img {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>前端动态切换图片</h1>
<p>点击下面的按钮来切换图片:</p>
<button onclick="changeImage()">切换图片</button>
<br><br>
<img id="myImage" src="img1.jpg">
<script>
var myImage = document.getElementById("myImage");
var imageIndex = 1;
function changeImage() {
if (imageIndex == 1) {
myImage.src = "img2.jpg";
imageIndex = 2;
} else {
myImage.src = "img1.jpg";
imageIndex = 1;
}
}
</script>
</body>
</html>
```
在上面的代码中,我们首先定义了一个按钮,当用户点击这个按钮时,会触发 `changeImage` 函数来切换图片。我们使用 JavaScript 来实现这个函数。
在 JavaScript 中,我们定义了一个 `myImage` 变量,来表示我们要切换的图片。我们还定义了一个 `imageIndex` 变量,来跟踪当前显示的图片是第一张还是第二张。
在 `changeImage` 函数中,我们首先检查当前显示的图片是哪一张。如果是第一张,我们就将 `myImage` 的 `src` 属性设置为第二张图片的 URL,并将 `imageIndex` 设置为2。否则,我们就将 `myImage` 的 `src` 属性设置为第一张图片的 URL,并将 `imageIndex` 设置为1。
这样,当用户点击按钮时,就会切换图片。
html前端自动动态切换图片完整代码
以下是一个简单的 HTML、CSS 和 JavaScript 代码,用于在前端自动动态切换图片:
HTML:
```html
<div class="image-slider">
<img src="image1.jpg" alt="Image 1" id="slider-image">
</div>
```
CSS:
```css
.image-slider {
position: relative;
width: 100%;
height: 400px;
}
.image-slider img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
```
JavaScript:
```js
var images = [
"image1.jpg",
"image2.jpg",
"image3.jpg"
];
var currentIndex = 0;
var sliderImage = document.getElementById("slider-image");
setInterval(function() {
currentIndex++;
if (currentIndex == images.length) {
currentIndex = 0;
}
sliderImage.src = images[currentIndex];
}, 3000);
```
这段代码会在 `div` 元素中显示一张图片,并且在每 3 秒钟自动切换到下一张图片。你可以将 `images` 数组中的图片路径替换为你自己的图片路径。