前言:
不管是 App 还是网站, 基本上都会出现轮播图. 但绝大多数都是纯图片轮播.
而图片轮播的常见实现方式有:
1,swiper 插件 (vue 中使用, 官方文档)
2,elementUI,iview 等组件库的走马灯
3, 原生 JS(博客 1, 博客 2)
4,jQ
5,CSS3 的 @keyframes 规则
那么我想实现一个基于 vue 的图片 + 视频的轮播图效果: 如果是图片, 每隔三秒就自动切换; 如果是视频, 视频播放完成之后再切换. 这要怎么做呢?
---------------------------------------------------------- 直接上代码 --html 部分 ------------------------------------------------------
<video></video > 属性: autoplay-- 视频在就绪后马上播放; webkit-playsinline-- 视频小窗播放;
Media 事件: onended-- 当媒介已到达结尾时触发
---------------------------------------------------------- 直接上代码 -- JS 部分 -------------------------------------------------------
轮播逻辑类似于用下标记录, 每次展示数组的第二个元素, 同时删除第一个元素将其插入到数组最后一位.
当页面挂载完毕, 显示数组的第一个元素对应的内容. list 为请求到的后台接口返回的数据, 可以手动写成数组如 [a.jpg , b.jpg , c.mp4]
如果数组元素为图片, 打开定时器开始轮播; 如果是视频, 等到视频播放完成后再轮播下一个内容.
---------------------------------------------------------- 直接上代码 --CSS 部分 -------------------------------------------------
结尾:
写到这里, 图片 + 视频的轮播效果也基本实现. 当然了, 代码还有很多需要优化的地方, 在这也是给各位做一个参考. 写完其实有更多的想法了:
1, 如何优雅的手动控制视频的播放而非自动播放 (获取视频播放时长, 视频的触发事件等).
2, 如果要做一个视频播放器, 如何去修改播放器样式以及视频控件的效果.
3, 用 swiper 或者走马灯可以实现吗?(因为我刚开始用的 swiper 没写出来.. 扎心)
补充:
我创建了个全栈学习交流群: 868534586. 有兴趣的小伙伴可以进群交流.(目前就我一个人..)
来源: http://www.jianshu.com/p/2587b120252e