带有 slider 的 Javascript onClick Before After 图像效果

Question

我想做一个前/后图像效果 slider ，当点击一个图像时它会替换为另一个图像。再次单击替换图像时，它将返回到以前的图像。

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

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

在此之前，我已经尝试过 mouseover 和 mouseout 功能。演示 Codepen

<img src="https://i.ibb.co/wNsz0MW/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';">

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

如果我能在所有设备上使用 mouseOver 和 mouseOut 来实现它，那将是一个最好的解决方案。

Answer 1

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

基本上，您可以使用 html data-* 属性来存储任意数据 - 比如第二张图片的 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。

这是一个例子:

<img src="https://i.ibb.co/ccsnkJS/image-11.jpg" onclick="if(this.src!=this.getAttribute('data-secondImg')){this.old=this.src;this.src=this.getAttribute('data-secondImg')}else{this.src=this.old;}" data-secondImg="https://i.ibb.co/R7d7Lw6/image-13.jpg">

跟进

如果你想使用多个事件 - onMouseOver 和 onClick - 它们应该触发相同的 Action ，如果你有很多图像，最好将 Action 定义为一个函数一次，然后只用它的名字引用它。

这个例子对 onMouseOver 和 onClick 事件都有反应:

function swap(t) {
  if (t.src != t.getAttribute('data-secondImg')) {
    t.old = t.src;
    t.src = t.getAttribute('data-secondImg')
  } else {
    t.src = t.old;
  }
}

<img src="https://picsum.photos/id/88/64/64" onClick="swap(this)" onMouseOver="swap(this)" data-secondImg="https://picsum.photos/id/76/64/64">