javascript - 如何创建只有一个图像的图像幻灯片？ (自己滑动)

Question

对于这个令人困惑、宽泛、空洞的问题，我们深表歉意。

假设我只有 ONE 图片，我想创建一个幻灯片放映，(以 Angular 或 jquery 或 javascript 或仅使用 Css，无论什么:()。

我想要的是当用户点击我的滑动按钮时，这张图片向右滑出，同时向右滑动，这张图片从左边滑入；

(这张图片向右滑出的部分，同时从左边进入)

像这样的插图:

所以实际上这个 Imeage 永远不会从 View 中消失，只是在其自身上滑动。

我用 angularJS 创建了这个，但我不能让它同时进行，我的意思是，图像向左滑动，完成后，它从右边进入，所以有时 View 是空的。我不要这个

请帮帮我一个插件，一个 css exapme， Angular 示例，javascript，jquery，任何东西都可以。

在这里问是我最后一次尝试，我已经搜索和编码了一个月，但没有成功:(

Answer 1

CSS 可以提供一些可能性。

一个伪元素，text-indent 和 transition 以及 pointer-events 来切换点击效果。

HTML 中的

tabindex 允许通过点击并最终通过 tab 键聚焦 div。

DEMO

HTML

<div class="slidebif" tabindex="0"><img src="http://lorempixel.com/200/300/people/9"/></div>

CSS

.slidebif {
  margin:1em auto;/* optionnal*/
  cursor:pointer;/* let's show it  clicks */
  width:200px;/* img width*/
  white-space:nowrap;/* keep img and cloned pseudo on same line */
  text-indent:0;/* set for transition */
  transition:0.5s;/* tune it */
  overflow:hidden;/* hide the pseudo */
}
.slidebif:after {
  content: url(http://lorempixel.com/200/300/people/9);/* same image as img src */
}
.slidebif:after, .slidebif img {
  vertical-align:top;/* optionnal*/
}
.slidebif:focus {
  text-indent:-200px;/* bring pseudo in sight */
  pointer-events:none;/* kill click catching , so it looses focus if clicked again */
}

---

variant with a 2 columns table .