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小技巧--自动隐藏红叉叉
Aug 13 Javascript
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 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更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
由浅入深讲解python中的yield与generator
2017/04/05 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
巴西女装购物网站:Eclectic
2018/04/24 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
宿舍违规检讨书
2014/01/12 职场文书
初中生自我鉴定
2014/02/04 职场文书
自我查摆剖析材料
2014/10/11 职场文书
分居协议书范本
2014/11/03 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技