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 相关文章推荐
JS无限树状列表实现代码
Jan 11 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 Javascript
JS如何监听div的resize事件详解
Dec 03 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
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
Python 实现随机数详解及实例代码
2017/04/15 Python
python3 线性回归验证方法
2019/07/09 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
python实现XML解析的方法解析
2019/11/16 Python
Django使用rest_framework写出API
2020/05/21 Python
基于opencv实现简单画板功能
2020/08/02 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
全球最大的游戏市场:G2A
2018/07/05 全球购物
2014年依法行政工作总结
2014/11/19 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
辞职信的写法
2015/02/27 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
节约用水广告语60条
2019/11/14 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
分享提高 Python 代码的可读性的技巧
2022/03/03 Python
Docker安装MySql8并远程访问的实现
2022/07/07 Servers