Javascript使用滑块单击前后图像效果

我想做一个前后图像效果滑块，当点击一个图像时，它将替换为另一个图像。再次单击“替换图像”时，它将返回到上一个图像

Onclick函数只能一次更改图像。 这是我的工作演示

在此之前，我尝试过mouseover和mouseout函数。演示

但不幸的是，mouseover和mouseout功能在移动设备上不起作用。使用mouseover和mouseout，当点击屏幕时，新图像替换，但当我再次点击屏幕时，图像不会返回到上一个图像

---

这将是一个最好的解决方案，如果我可以实现它与鼠标和鼠标在所有设备

实现这一点的一种方法是创建两个独立的图像

使其中一个图像在悬停时执行所需操作，另一个图像在单击时执行所需操作

最后，使用CSS（或JS）隐藏给定屏幕大小或设备类型不需要的元素

<style>
  .mobile {
    visibility: visible;
  }
  .desktop {
    visibility: hidden;
  }
  @media screen and (max-width: 600px) {
    .mobile {
      visibility: hidden;
    }
    .desktop {
      visibility: visible;
    }
  }
</style>

<img
  class="mobile"
  src="https://i.ibb.co/ccsnkJS/image-11.jpg"
  onclick="this.src ='https://i.ibb.co/R7d7Lw6/image-13.jpg';"
/>
<img
  class="desktop"
  src="https://i.ibb.co/ccsnkJS/image-11.jpg"
  onmouseover="this.src ='https://i.ibb.co/R7d7Lw6/image-13.jpg';"
  onmouseout="this.src = 'https://i.ibb.co/ccsnkJS/image-11.jpg';"
/>

.手机{
能见度：可见；
}
.桌面{
可见性：隐藏；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.手机{
可见性：隐藏；
}
.桌面{
能见度：可见；
}
}

如果您想在html元素本身中定义所有代码，事情就有点棘手了

基本上，您可以使用htmldata-*属性来存储任意数据，比如第二幅图像的url

<img src="https://i.ibb.co/ccsnkJS/image-11.jpg" data-secondImg="https://i.ibb.co/R7d7Lw6/image-13.jpg">

在onclick处理程序中，我们需要检查当前为img元素的src属性设置的url，并将其与data secondImg进行比较。如果不同，请使用secondImg中的url并将当前url存储在备份变量中。如果没有不同，请使用备份变量的url

下面是一个例子：

---

谢谢。这是一个惊人的解决方案。古玩头脑想知道是否有可能存储文本数据和点击像这样的过程返回。很高兴我可以帮助！当然，这个概念也可以应用于其他html元素。下面是一个div

初始文本的示例

抱歉再次打扰。最后一个问题。是否可以同时使用onclick和onmouseover！！！没问题-我已经把我的答案扩展到了MouseOver。再次非常感谢。但在移动设备中，首先点击图像不会改变。从第二次点击开始，它工作正常。滑块执行相同行为的所有图像。更新好主意。但在移动设备中使用此解决方案时，不可能恢复以前的图像。我想我必须合并@obsecure给出的以前的解决方案。

<style>
  .mobile {
    visibility: visible;
  }
  .desktop {
    visibility: hidden;
  }
  @media screen and (max-width: 600px) {
    .mobile {
      visibility: hidden;
    }
    .desktop {
      visibility: visible;
    }
  }
</style>

<img
  class="mobile"
  src="https://i.ibb.co/ccsnkJS/image-11.jpg"
  onclick="this.src ='https://i.ibb.co/R7d7Lw6/image-13.jpg';"
/>
<img
  class="desktop"
  src="https://i.ibb.co/ccsnkJS/image-11.jpg"
  onmouseover="this.src ='https://i.ibb.co/R7d7Lw6/image-13.jpg';"
  onmouseout="this.src = 'https://i.ibb.co/ccsnkJS/image-11.jpg';"
/>

<img src="https://i.ibb.co/ccsnkJS/image-11.jpg" data-secondImg="https://i.ibb.co/R7d7Lw6/image-13.jpg">