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 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
Vue生命周期示例详解
Apr 12 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 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 ADODB使用方法集锦
2008/03/25 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
layui表格数据重载
2019/07/27 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
pygame实现简易飞机大战
2018/09/11 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
Python如何定义有默认参数的函数
2020/08/10 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
程序员岗位职责
2013/11/11 职场文书
无偿献血倡议书
2014/04/14 职场文书
幼儿评语大全
2014/04/30 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
物理课外活动总结
2014/08/27 职场文书
五好家庭申报材料
2014/12/20 职场文书
比赛主持人开场白
2015/05/29 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript