Swipe实现3d轮播图的实例教程

来源：动视网责编：小采时间：2020-11-27 20:18:33

Swipe实现3d轮播图的实例教程

Swipe实现3d轮播图的实例教程:今天的轮播图,和往常的有一点点不同哦!可以说是有一点点的3D效果!因为他在运动的时候,是以正方体的样子左右滚动的;先引插件:<link rel="stylesheet" href="swiper.css1.1.11"> <script src=&

推荐度：

点击下载本文 文档为doc格式

导读Swipe实现3d轮播图的实例教程:今天的轮播图,和往常的有一点点不同哦!可以说是有一点点的3D效果!因为他在运动的时候,是以正方体的样子左右滚动的;先引插件:<link rel="stylesheet" href="swiper.css1.1.11"> <script src=&

今天的轮播图,和往常的有一点点不同哦!可以说是有一点点的3D效果!因为他在运动的时候,是以正方体的样子左右滚动的;

先引插件:

然后还是那句话:翠花,上代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Swiper demo</title>
	<meta name="viewport" content="width=device-width,initial-scale=1"/>

 <link rel="stylesheet" href="swiper.css?1.1.11">

 <style>
 /*样式*/
 html, body {
 position: relative;
 height: 100%;
 }
 body {
 background: #fff;
 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 font-size: 14px;
 color:#000;
 margin: 0;
 padding: 0;
 }
 img{
 	width: 100%;
 	height: 100%;
 }
 .swiper-container {
 width: 500px;
 height: 500px;
 position: absolute;
 left: 45%;
 top: 35%;
 margin-left: -150px;
 margin-top: -150px;
 }
 .swiper-slide {
 background-position: center;
 background-size: cover;
 }
 </style>
</head>
<body>
<!-- Swiper轮播图 -->
 <div class="swiper-container">
 <div class="swiper-wrapper">
 <div class="swiper-slide"><img src="../img/2d.jpg"/></div>
 <div class="swiper-slide"><img src="../img/2d.jpg"/></div>
 <div class="swiper-slide"><img src="../img/2d.jpg"/></div>
 <div class="swiper-slide"><img src="../img/2d.jpg"/></div>
 <div class="swiper-slide"><img src="../img/2d.jpg"/></div>
 </div>
 <div class="swiper-pagination"></div>
 </div>

 <script src="swiper.js?1.1.11"></script>

 <script>
 var swiper = new Swiper('.swiper-container', {
 pagination: '.swiper-pagination',
 
 //循环 往返的动
 loop:true,
 //小白点不能点击
	autoplayDisableOnInteraction:false,
	
 effect: 'cube',
 grabCursor: true,
 cube: {
 shadow: true,
 slideShadows: true,
 shadowOffset: 20,
 shadowScale: 0.94
 }
 });
 </script>
</body>
</html>

　　有没有很简单啊!!!

Swipe实现3d轮播图的实例教程

推荐度：

点击下载本文 文档为doc格式

标签：轮播实现 3d

热门焦点

Swipe实现3d轮播图的实例教程

Swipe实现3d轮播图的实例教程

Swipe实现3d轮播图的实例教程

最新推荐

猜你喜欢

热门推荐