使用 JavaScript 动态显示和隐藏图片110

在 JavaScript 中，我们可以通过操纵 HTML 元素来动态显示和隐藏图片。这在创建交互式 web 应用时非常有用，例如：幻灯片、产品画廊或图像切换。

显示图片

要使用 JavaScript 显示隐藏的图片，我们可以使用属性。该属性接受以下值：
block：使元素可见并以块元素的形式布局
none：使元素不可见

以下代码显示带有 ID 为 "myImage" 的隐藏图片：```javascript
("myImage"). = "block";
```

隐藏图片

要隐藏图片，我们可以将属性设置为 none。以下代码隐藏带有 ID 为 "myImage" 的图片：```javascript
("myImage"). = "none";
```

使用事件监听器

我们可以将事件监听器添加到页面元素上，例如按钮或链接，以响应用户交互并显示或隐藏图片。以下代码添加一个单击事件监听器，当用户单击按钮时显示图片：```javascript
("myButton").addEventListener("click", function() {
("myImage"). = "block";
});
```

使用条件语句

我们还可以使用条件语句在特定条件下显示或隐藏图片。例如，以下代码在用户悬停在图像上时显示它：```javascript
("myImage").addEventListener("mouseover", function() {
= "block";
});
("myImage").addEventListener("mouseout", function() {
= "none";
});
```

设置时间间隔

我们可以使用 setInterval() 函数在特定时间间隔内动态显示和隐藏图片。以下代码每 5 秒显示和隐藏图片：```javascript
var myImage = ("myImage");
setInterval(function() {
if ( === "block") {
= "none";
} else {
= "block";
}
}, 5000);
```

示例用例

幻灯片

JavaScript 可用于创建自动播放的幻灯片，按顺序显示一组图片。以下代码创建了一个简单的幻灯片：```javascript
var images = ["", "", ""];
var currentImageIndex = 0;
setInterval(function() {
("myImage").src = images[currentImageIndex];
currentImageIndex++;
if (currentImageIndex >= ) {
currentImageIndex = 0;
}
}, 3000);
```

产品画廊

JavaScript 可用于创建交互式产品画廊，允许用户放大、缩小和查看产品图片的不同角度。以下代码创建了一个基本的产品画廊：```javascript
var productImages = [
{
large: "",
small: ""
},
{
large: "",
small: ""
},
{
large: "",
small: ""
}
];
var currentProductIndex = 0;
("myProductImage").src = productImages[currentProductIndex].small;
("nextButton").addEventListener("click", function() {
currentProductIndex++;
if (currentProductIndex >= ) {
currentProductIndex = 0;
}
("myProductImage").src = productImages[currentProductIndex].large;
});
("previousButton").addEventListener("click", function() {
currentProductIndex--;
if (currentProductIndex < 0) {
currentProductIndex = - 1;
}
("myProductImage").src = productImages[currentProductIndex].large;
});
```