Javascript 如何创建一个图像幻灯片，只有一个图像？（幻灯片本身）

对不起，这个令人困惑、宽泛、愚蠢的问题

假设我只有一张图像，我想制作一个幻灯片（用angular、jquery、javascript或Css，随便什么：（））

我想要的是当用户点击我的幻灯片按钮时，这个图像向右滑动，同时，这个图像从左边滑入

（这张图片中从右向外延伸的部分，同时从左向内延伸）

如下图所示：

所以事实上，这个Imeage从来不会从视图中消失，只会自行滑动

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

请帮帮我 插件、css exapme、angular示例、javascript、jquery，任何东西都可以

---

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

CSS可以提供一些可能性

多个元素中的一个带有伪元素，

文本缩进

和

转换

和

指针事件

切换点击效果

HTML中的

tabindex

，允许通过单击并最终通过tab键聚焦

div

HTML

---

---

有无数的图像旋转木马。当然，可能没有一个图像可以只处理一个图像，即一个

。从您的绘图中可以看到，一个名为

pic.jpg

的图像实际上在您的页面上出现了两次。这意味着您需要两个

的实例。因此，请选择任何old插件，然后将所有元素的源设置为

pic.jpg

。为什么不只拍摄一张图片并复制它。这样你就可以在两张图片之间滑动。使用任何一个滑块。实际上，我不想在网格上自己制作幻灯片，当用户单击网格的下一页时，我希望当前页面滑动右边的des和新的网格是这样进来的：只要看看这个页面的日历，看看我想要什么：这正是我想要的，但是如果我不想在图像上滑动，如果我用一张表替换图像呢？我的意思是这样的：点击日历，看看我的意思，请再次感谢如果你想使用一张表，我会怎么办uess您需要将所有列设置为相同的宽度。如果要使两列以上，则需要javaScript使其成为项目符号proff@xe4me如果元素被设置为内联块/内联表，这可以用于2列表格或2列布局。这是非常精确的事情。非常感谢我现在正在查看代码感谢为什么这不起作用当tweeter bootstrap出现在页面上时？我的意思是当我使用bootstrap时，两个collumn将并排显示，单击后，它们都将滑动？

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

.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 */
}