图片轮播的实现历程

原创 x778518694 随笔 个人笔记 200阅读 2017-06-20 18:32:36 举报

有错误或不当之处,请指正。

1、 使用@keyframes切换主显示区域的背景图片,实现轮播
html 代码

优点:简单、高效
缺点:兼容性是个大问题
图片是一直在变化的,我希望显示之后停留一会,在显示到下一个,怎么办?
经过各种查资料,然后以下办法搞定
主要通过控制每个背景的帧数;
html 代码

然后,我需要鼠标悬浮停止动画
html 代码

还需要上一条下一条的按钮,并可以隐藏展示
html 代码

上面有个问题在图片切换过程中,鼠标移入,会导致动画直接中止,不会等换完图片之后在停止;还有点击底部页签,点击上下条切换均需要实现
因此首先想到的是不太通过animation,通过定时器移动元素的位置来实现,代码如下:
html 代码

然后想到的时,将各帧动画拆成多个小动画,通过js 定时器加载不同的动画对应的class
html 代码

找了好久js控制animation的帧的方法,没有找到,如果有该类方法,有知道的请告知,谢谢

有错误不当之处,或更好的方法请指出

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复