JS写一个旋转木马的视频播放效果

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

flowchart 箭头图标勿删

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>