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的属性设置中自己可自由发挥,强大吧。

转载于:https://www.cnblogs.com/xiaobeiju/p/10224152.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值