对于这个令人困惑、宽泛、空洞的问题,我们深表歉意。
假设我只有 ONE 图片,我想创建一个幻灯片放映,(以 Angular 或 jquery 或 javascript 或仅使用 Css,无论什么:()。
我想要的是当用户点击我的滑动按钮时,这张图片向右滑出,同时向右滑动,这张图片从左边滑入;
(这张图片向右滑出的部分,同时从左边进入)
像这样的插图:
所以实际上这个 Imeage 永远不会从 View 中消失,只是在其自身上滑动。
我用 angularJS 创建了这个,但我不能让它同时进行,我的意思是,图像向左滑动,完成后,它从右边进入,所以有时 View 是空的。 我不要这个
请帮帮我 一个插件,一个 css exapme, Angular 示例,javascript,jquery,任何东西都可以。
在这里问是我最后一次尝试,我已经搜索和编码了一个月,但没有成功:(
最佳答案
CSS 可以提供一些可能性。
一个伪元素,
text-indent
和 transition
以及 pointer-events
来切换点击效果。
tabindex
允许通过点击并最终通过 tab 键聚焦 div
。
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 */
}
关于javascript - 如何创建只有一个图像的图像幻灯片? (自己滑动),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24844939/