javascript图片切换代码
时间: 2023-09-07 19:17:13 浏览: 50
以下是一个简单的 JavaScript 图片切换代码:
HTML 代码:
```html
<div>
<img id="myImage" src="image1.jpg">
</div>
<button onclick="changeImage()">切换图片</button>
```
JavaScript 代码:
```javascript
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("image1")) {
image.src = "image2.jpg";
} else {
image.src = "image1.jpg";
}
}
```
这段代码中,我们首先通过 `document.getElementById()` 方法获取图片元素,然后判断当前图片的 `src` 属性是否包含 `image1`,如果是,则将 `src` 属性修改为 `image2.jpg`,否则修改为 `image1.jpg`。最后,我们将修改后的图片展示在网页上。
相关问题
javascript图片切换
JavaScript图片切换是一种通过JavaScript代码实现在网页中动态切换图片的效果的方法。根据提供的引用内容,可以使用以下代码实现简单的图片切换效果:
```
<div id="demog">
<div id="demog1">
图片组
</div>
<div id="demog2">
图片组
</div>
</div>
<script>
var sspeed = 10;
demog2.innerHTML = demog1.innerHTML;
function Marquees() {
if (demog2.offsetWidth - demog.scrollLeft <= 0) {
demog.scrollLeft -= demog1.offsetWidth;
} else {
demog.scrollLeft++;
}
}
var MyMars = setInterval(Marquees, sspeed);
demog.onmouseover = function() {
clearInterval(MyMars);
};
demog.onmouseout = function() {
MyMars = setInterval(Marquees, sspeed);
};
</script>
```
以上代码会实现一个在网页中两组相同图片之间无缝切换的效果。其中,`demog`是外层容器的ID,`demog1`和`demog2`是两组图片的容器ID,`sspeed`表示切换速度。
JavaScript图片浏览代码
以下是一个简单的 JavaScript 图片浏览器的源代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 图片浏览器</title>
<script>
var images = ["images/image1.jpg", "images/image2.jpg", "images/image3.jpg", "images/image4.jpg"];
var currentIndex = 0;
function showImage() {
var img = document.getElementById("image");
img.src = images[currentIndex];
}
function nextImage() {
currentIndex++;
if (currentIndex >= images.length) {
currentIndex = 0;
}
showImage();
}
function prevImage() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = images.length - 1;
}
showImage();
}
</script>
</head>
<body>
<h1>JavaScript 图片浏览器</h1>
<!-- 图片展示区域 -->
<img id="image" src="images/image1.jpg" alt="图片1">
<!-- 按钮区域 -->
<button onclick="prevImage()">上一张</button>
<button onclick="nextImage()">下一张</button>
</body>
</html>
```
以上代码中,我们使用 JavaScript 实现了一个简单的图片浏览器。首先,我们定义了一个数组 `images` 存储了图片的路径,然后定义了一个变量 `currentIndex` 记录当前显示的图片的索引。`showImage()` 函数用于显示当前索引对应的图片,`nextImage()` 和 `prevImage()` 函数用于切换图片。在 HTML 中,我们使用 `<img>` 标签展示图片,使用两个按钮分别调用 `nextImage()` 和 `prevImage()` 函数来切换图片。
在实际应用中,可以通过添加更多的功能来增强图片浏览器,如图片缩放、全屏显示、幻灯片播放等。