JS中利用swiper实现3d翻转幻灯片实例代码


Posted in Javascript onAugust 25, 2017

前言

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!

本文详细的给大家介绍了关于JS用swiper实现3d翻转幻灯片的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

先上效果图

JS中利用swiper实现3d翻转幻灯片实例代码

使用的是swiper3.0版本coverflow效果,源码如下

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="utf-8">
 <title>Swiper demo</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
 <!-- Link Swiper's CSS -->
 <link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css" rel="external nofollow" rel="stylesheet">
 <!-- Demo styles -->
 <style>
  body {
   background: #fff;
   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
   font-size: 14px;
   color: #000;
   margin: 0;
   padding: 0;
  }
  .swiper-container {
   width: 100%;
   padding-top: 50px;
   padding-bottom: 50px;
  }
  .swiper-slide {
   background-position: center;
   background-size: cover;
   height: 170px;
   width: 130px!important;
  }
 </style>
</head>
<body>
 <!-- Swiper -->
 <div class="swiper-container">
  <div class="swiper-wrapper">
   <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
   <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
   <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
   <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
   <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
   <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
   <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
   <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
   <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
   <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
   <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
   <div class="swiper-slide" style="background-image:url(https://ws1.sinaimg.cn/large/6aedb651gy1fitoce9qqdj204o06o760.jpg)"></div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
 </div>
 <!-- Swiper JS -->
 <script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.js"></script>
 <script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.js"></script>
 <!-- Initialize Swiper -->
 <script>
  var mySwiper = new Swiper('.swiper-container', {
   effect: 'coverflow',
   slidesPerView: 2,
   centeredSlides: true,
   coverflow: {
    rotate: 0,
    stretch: 30,
    depth: 400,
    modifier: 1,
    slideShadows: true
   }
  })
 </script>
</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 #Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 #Javascript
JavaScript数据类型的存储方法详解
Aug 25 #Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 #Javascript
Vue.js实现网格列表布局转换方法
Aug 25 #Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 #Javascript
Angular2 组件交互实例详解
Aug 24 #Javascript
You might like
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
php 运行效率总结(提示程序速度)
2009/11/26 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
JavaScript 数组循环引起的思考
2010/01/01 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
vue 页面加载进度条组件实例
2018/02/05 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
Python 正则表达式操作指南
2009/05/04 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
使用Python实现简单的服务器功能
2017/08/25 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
python分布式编程实现过程解析
2019/11/08 Python
python Tensor和Array对比分析
2020/01/08 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
父亲的菜园教学反思
2014/02/13 职场文书
财政专业求职信范文
2014/02/19 职场文书
语文教研活动总结
2014/07/02 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python