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