如何用swiper实现3D轮播图的凹陷效果

一、引入相关的CSS、JS文件

二、在HTML中写入3D轮播代码

                        <!--3D轮播凹陷效果图-->
			<div class="swiperbox swiper-container">
				<ul class="swiper-wrapper">
					<li class="swiper-slide">
						<a href="#">
							<img src="img/3D_1.png"/>
						</a>
					</li>
					<li class="swiper-slide">
						<a href="#">
							<img src="img/3D_2.png"/>
						</a>
					</li>
					<li class="swiper-slide">
						<a href="#">
							<img src="img/3D_3.png"/>
						</a>
					</li>
				</ul>
			</div>
			<!--3D轮播凹陷效果图结束-->

三、在<script></script>中编写相关的脚本

                <script>
			//轮播效果
			new Swiper('.swiper-container', {
				loop:true,              //使图片可循环播放
				autoplay: {
					delay: 1000,        //使图片可以自动播放
				},
				effect : 'coverflow',   //3D流coverflow
				slidesPerView: '3',		//显示3张图出来
				coverflowEffect: {
					rotate: 55,         //slide做3d旋转时Y轴的旋转角度
				},
			});
		</script>
		<!--script结束-->

四、实现3D轮播图凹陷效果的文件目录以及实现代码

1.实现效果的文件目录：

2.实现效果的具体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>3D轮播</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/Swiper/3.4.2/css/swiper.min.css">
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			
			ul{
				list-style: none;
			}
			
			/*3D轮播图*/
			.swiperbox{
				width: 50%;
			}
			
			.swiperbox img{
				width: 100%;
			}
		</style>
	</head>
	<body>
		<!--整个图片盒子-->
		<div class="imgbox">
			<!--3D轮播凹陷效果图-->
			<div class="swiperbox swiper-container">
				<ul class="swiper-wrapper">
					<li class="swiper-slide">
						<a href="#">
							<img src="img/3D_1.png"/>
						</a>
					</li>
					<li class="swiper-slide">
						<a href="#">
							<img src="img/3D_2.png"/>
						</a>
					</li>
					<li class="swiper-slide">
						<a href="#">
							<img src="img/3D_3.png"/>
						</a>
					</li>
				</ul>
			</div>
			<!--3D轮播凹陷效果图结束-->
		</div>
		
		<!--script-->
		<script type="text/javascript" src="https://d.apps.yayawan.com/videos/swiper.min.js"></script>
		<script>
			//轮播效果
			new Swiper('.swiper-container', {
				loop:true,              //使图片可循环播放
				autoplay: {
					delay: 1000,        //使图片可以自动播放
				},
				effect : 'coverflow',   //3D流coverflow
				slidesPerView: '3',		//显示3张图出来
				coverflowEffect: {
					rotate: 55,         //slide做3d旋转时Y轴的旋转角度
				},
			});
		</script>
		<!--script结束-->
	</body>
</html>

其实3D轮播图跟普通的轮播图是一样这样用的，只不过我在这里使用了3D流coverflowEffect这样的切换效果，所以可以实现3D的这个凹陷效果。除了3D流（overflow），其他的切换效果还有淡入淡出（fade），方块（cube），flip（3D翻转）这样的切换效果

具体可查看Swiper中文网学习，http://www.swiper.com.cn/

如何用swiper实现3D轮播图的凹陷效果

猜你喜欢