JS写一个旋转木马的视频播放效果
JS以及JQ的功能很强大,可以做出很多的优秀效果。今天给大家分享一个我之前写网站用到的旋转木马效果。
大概效果图就是这样的,上面的视频播放是旋转木马效果。
下面的音乐播放效果放在下一篇内容里面讲。
直接先上页面布局写法:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide qwbk01">
<a href="http://v.people120.org/dplayer.php?url=http://7xlx33.media1.z0.glb.clouddn.com/xshyxwl.mp4" target="_blank"><img src="/uploads/171113/32-1G113131J2C7.jpg"></a>
<p style="font-size: 1.7rem ;text-align: center;margin-top: 0.8rem">性生活有心无力怎么办</p>
</div>
<div class="swiper-slide qwbk01">
<a href="http://v.people120.org/dplayer.php?url=http://7xlx33.media1.z0.glb.clouddn.com/yxxshdys.mp4" target="_blank"><img src="/uploads/171113/32-1G113131H0952.jpg"></a>
<p style="font-size: 1.7rem ;text-align: center;margin-top: 0.8rem">影响性生活的因素有哪些</p>
</div>
<div class="swiper-slide qwbk01">
<a href="http://v.people120.org/dplayer.php?url=http://7xlx33.media1.z0.glb.clouddn.com/xgnzadys.mp4" target="_blank"><img src="/uploads/171113/32-1G113131AbA.jpg"></a>
<p style="font-size: 1.7rem ;text-align: center;margin-top: 0.8rem">性功能障碍的那些事</p>
</div>
<div class="swiper-slide qwbk01">
<a href="http://v.people120.org/dplayer.php?url=http://7xlx33.media1.z0.glb.clouddn.com/znrxlyqx.mp4" target="_blank"><img src="/uploads/171113/32-1G11313160U01.jpg"></a>
<p style="font-size: 1.7rem ;text-align: center;margin-top: 0.8rem">【七夕】老司机必知冷知</p>
</div>
<div class="swiper-slide qwbk01">
<a href="http://v.people120.org/dplayer.php?url=http://7xlx33.media1.z0.glb.clouddn.com/znrzzs.mp4" target="_blank"><img src="/uploads/171113/32-1G113131542F7.jpg"></a>
<p style="font-size: 1.7rem ;text-align: center;margin-top: 0.8rem">真男人涨姿势:早泄微探</p>
</div>
</div>
</div>
写法中主要还是用到swiper插件,根据swiper的功能来设置想要的属性,swiper-slide来做子页面的滑动效果。给每个滑块加上编号。
JS内容主要是设置各个属性
<script src="/2017mobile/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
effect:'coverflow',
grabCursor:true,
centeredSlides:true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
loop:true,
speed:500,
slidesPerView:'auto',
coverflow:{
rotate:0, //旋转的角度
stretch:1, //拉伸 切换图片左右间距和密集度
depth:80, //深度 切换图片上下的间距和密集度
modifier:12, //修正值,越大前面的效果越明显
slideShadows:false //页面阴影效果
}
});
</script>
重要内容都在coverflow中,这是设置的手动滑动,也可设置自动,也就是autoplay的属性,在swiper的属性设置中自己可自由发挥,强大吧。
JS写一个旋转木马的视频播放效果的更多相关文章
- JS写一个列表跑马灯效果--基于touchslide.js
先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 用原生js写一个"多动症"的简历
用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...
- JS写一个简单日历
JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- 前端与编译原理——用JS写一个JS解释器
说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...
- 如何使用 js 写一个正常人看不懂的无聊代码
如何使用 js 写一个正常人看不懂的无聊代码 代码质量, 代码可读性, 代码可维护性, clean code WAT js WTF https://www.destroyallsoftware.com ...
- 使用JS写一个计算器
先上效果图: 简单的加减乘除功能还是有的,所以我们就考虑怎么来实现这个功能. 根据预期效果,可以确定页面中的布局要用到table tr td. 所以先放上页面布局,table的边框宽度border,c ...
- 【Part1】用JS写一个Blog(node + vue + mongoDB)
学习JS也有一段时间了,准备试着写一个博客项目,前后端分离开发,后端用node只提供数据接口,前端用vue-cli脚手架搭建,路由也由前端控制,数据异步交互用vue的一个插件vue-resourse来 ...
- [NodeJS]使用Node.js写一个简单的在线聊天室
声明:教程来自<Node即学即用>.源代码案例均出自此书.博文仅为个人学习笔记. 第一步:创建一个聊天server. 首先,我们先来写一个Server: var net = require ...
随机推荐
- 模块学习--OS
1 返回当前目录信息 >>> os.getcwd() 'D:\\7_Python\\S14' 2 改变路径 >>> os.chdir('d:\\')#os.chdi ...
- Legal High
不让任何人承担责任,不想看的东西就回避, 但是,如果想夺回值得夸耀的生存方式,就必须看那些不愿意看的现实,必须带着身负重伤的觉悟前进,这才叫做战斗. 有怨言的话去坟墓里说,钱不是全部,钱就是你们向对手 ...
- jdk 档案库(包含历史版本)
http://java.sun.com/products/archive/ 参考:https://blog.csdn.net/shiluyong8068/article/details/7894747 ...
- Android之收音机UI实现(转)
源码: http://www.2cto.com/kf/201211/171417.html 最近在研究收音机的源码,本来想把收音机从源码中提取出来,做成一个单独的应用,但是,收音机需要底层的支持,所以 ...
- Linux centosVMware shell中的函数、shell中的数组、
一.shell中的函数 函数就是把一段代码整理到了一个小单元中,并给这个小单元起一个名字,当用到这段代码时直接调用这个小单元的名字即可. 格式: function _name() { command ...
- 为kubernetes-dashboard页面增加过期时间,减少登录次数.
方法很多,最简单的就是登录后,找到Deployments 服务, 右侧界面会出现kubernetes-dashboard的项目,如果没出现,那么在namespace那里选择全部名称空间. ports: ...
- Using webpack-dev-server
官方讲解地址:https://webpack.js.org/guides/development/#using-webpack-dev-server The webpack-dev-server pr ...
- js给元素添加样式[addClass][hasClass]
function addClass(el, className) { if (hasClass(el, className)) { return } let newClass = el.classNa ...
- linux的ls -al指令
ls是“list”的意思,参数-al则表示列出所有的文件,包括隐藏文件,就是文件前面第一个字符为.的文件. 1.第一列便是这个文件的属性: #第一个属性表示这个文件时“目录.文件或链接文件等”: ...
- 首款中文渗透测试专用Linux系统—MagicBox
1. MagicBox的介绍 首款中文渗透测试专用Linux系统——MagicBox即将问世,中文名称:“魔方系统”,开发代号:Genesis.第一版本发布时间计划为2012年12月5日 这是 ...