swiper实现异形轮播效果


Posted in Javascript onNovember 28, 2019

swiper轮播—异形轮播,供大家参考,具体内容如下

最近经常会碰到很多用swiper插件做各种各样轮播图的需求,没有做过3d异形轮播图,所以研究了一下,把经验给大家分享一下

swiper实现异形轮播效果

上面图片就是轮播图所要达到的效果:焦点图片居中并向前突出,自动轮播。

代码介绍:

1.我的移动端屏幕尺寸640px,这个移动端屏幕适应是封装好的,如果需要引用,只需要改一下屏幕尺寸就好了。

2.我的图片大小是251*441。

3.swiper:指滑动、切换(整个滑动对象,有时特指滑块释放后仍然正向移动直到贴合边缘的过程(过渡))

container:指容器(swiper的容器里面包括滑动快(slide)的集合(wrapper)、分页器(pagination)、前进按钮等)

wrapper:指包含(触控的对象,可触摸区域,移动的块的集合,过渡时会随slide切换产生位移)

slider:指滑块(切换的块中的一个,可以包含文字、图片、html元素或另外一个swiper

pagination:指分页器(指示slide的数量和当前活动的slide)

active:指活动的,激活的(可视的(visible)slide是活动的,当可视slide不止一个时,默认最左边那个活动的)

4.详细参数配置参照swiper配置

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css" rel="external nofollow" >
<script> 
  //屏幕适应 --移动端
  (function (win, doc) {
    if (!win.addEventListener) return;
    var html = document.documentElement;
    function setFont() {
      var html = document.documentElement;
      var k = 640;
      html.style.fontSize = html.clientWidth / k * 100 + "px";
    }
    setFont();
    setTimeout(function () {
      setFont();
    }, 300);
    doc.addEventListener('DOMContentLoaded', setFont, false);
    win.addEventListener('resize', setFont, false);
    win.addEventListener('load', setFont, false);
  })(window, document);
  </script>
<style>
.swiper-container{width:4.14rem;height:4.88rem;margin:0 auto;position:relative;}
    .swiper-container img{display:block;width:2.51rem;height:4.41rem;margin:0 auto;}
    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom:0;left:0;width:100%;}
    .swiper-pagination-bullet-active {background-color:#ffd200;}
</style>
</head>
<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="ossweb-img/s-img1.png">
      </div>
      <div class="swiper-slide">
        <img src="ossweb-img/s-img2.png">
      </div>
      <div class="swiper-slide">
        <img src="ossweb-img/s-img3.png">
      </div>
      <div class="swiper-slide">
        <img src="ossweb-img/s-img4.png">
      </div>
      <div class="swiper-slide">
        <img src="ossweb-img/s-img5.png">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
<!-- 轮播图 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
<script>
// 轮播图

 // 初始化swiper
 var mySwiper2 = new Swiper('.swiper-container', {
 autoplay:2000,//自动滑动
 speed:500,//自动滑动开始到结束的时间(单位ms)
 loop:true,//开启循环
 loopedSlides:5,//在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
 slidesPerView:'auto',//设置slider容器能够同时显示的slides数量(carousel模式)。另外,支持'auto'值,会根据容器container的宽度调整slides数目。
 effect:'coverflow',//可以实现3D效果的轮播,
 pagination:'.swiper-pagination',//分页器
 centeredSlides:true,//设定为true时,active slide会居中,而不是默认状态下的居左。
 coverflow:{
 rotate:0,//slide做3d旋转时Y轴的旋转角度。默认50。
 stretch:100,//每个slide之间的拉伸值,越大slide靠得越紧。 默认0。
 depth:150,//slide的位置深度。值越大z轴距离越远,看起来越小。 默认100。
 modifier:1,//depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。默认1。
 slideShadows:false,//开启slide阴影。默认 true。
 },
});
// rotate :number,  //侧转角度(正值凹陷)、(负值凸出)
//   stretch : number, //每个slide之间拉伸值(正值紧贴)、(负值远离)
//   depth : number,  // 正值越大slide为远景图(可负值)
//   modifier : number, //depth和rotate和stretch的倍率,值越大这三个参数的效果越明显
//   shadows : true   //是否使用阴影
</script>
</body>
</html>

这样一个异形轮播图就好啦!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
jQuery构造函数init参数分析
May 13 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
js 数组 fill() 填充方法
Nov 02 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 #Javascript
javascript实现异形滚动轮播
Nov 28 #Javascript
javascript实现切割轮播效果
Nov 28 #Javascript
javascript实现商品图片放大镜
Nov 28 #Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 #Javascript
javascript实现弹幕墙效果
Nov 28 #Javascript
jquery实现直播弹幕效果
Nov 28 #jQuery
You might like
PHP初学入门
2006/11/19 PHP
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
Javascript 继承机制实例
2009/08/12 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
如何用Python 加密文件
2020/09/10 Python
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
幼儿园实习生辞职信
2014/01/20 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
入股合作协议书
2014/10/12 职场文书
平安家庭事迹材料
2014/12/20 职场文书
给老婆道歉的话
2015/01/20 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
Java spring定时任务详解
2021/10/05 Java/Android