原生JS实现隐藏显示图片 JS实现点击切换图片效果

原生JS的魔法：点击间切换、隐藏与显示图片

你是否想过用纯原生JS实现图片的隐藏与显示，以及点击切换图片的功能？今天，我们将一起这个有趣的话题。

设想我们有两个按钮，一个用于显示和隐藏图片，另一个用于切换图片。还有一张图片在页面中。

按钮一：显示与隐藏

当我们点击这个按钮时，如果当前是“隐藏”状态，图片就会显示出来，按钮文字也会变成“隐藏”；反之，如果图片已经显示，点击后则会隐藏，按钮文字变为“显示”。

这种交互的实现，依赖于JS对按钮和图片的操控。通过改变图片的`opacity`属性，我们可以实现图片的显示与隐藏。通过修改按钮的`innerText`，我们可以改变按钮的显示文字。

按钮二：图片切换

当点击“换”按钮时，图片会在两张预设的图片之间切换。如果图片当前处于隐藏状态，则无法切换。

这个功能的实现，依赖于一个图片数组`imgs`。当点击“换”按钮时，我们会根据当前的索引`xia`，更改图片的`src`属性，实现图片的切换。我们还会对`xia`进行计数，当达到数组长度时，将其重置为0，实现图片的循环播放。

这一切的实现，只需要简单的原生JS代码。无需复杂的框架或库，就可以实现图片的隐藏、显示和切换。

示例代码如下：

```html

隐藏

换

11.jpg" id="img" 300px" />

```

如此简单的代码，你是否已经学会了呢？原生JS的魅力，就在于此。它可以让我们用最少的代码，实现最丰富的功能。