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 相关文章推荐
JS简单的轮播的图片滚动实例
Jun 17 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
json的使用小结
Jun 08 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 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使用Session实现上传进度功能详解
2019/08/06 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
7个JS基础知识总结
2014/03/05 Javascript
Node.js模块加载详解
2014/08/16 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
python实现下载文件的三种方法
2017/02/09 Python
Django 内置权限扩展案例详解
2019/03/04 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
python如何从文件读取数据及解析
2019/09/19 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
pandas分组聚合详解
2020/04/10 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
2014年党务公开工作总结
2014/12/09 职场文书
股权投资协议书
2016/03/23 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
Pandas搭配lambda组合使用详解
2022/01/22 Python
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis
Python Pandas解析读写 CSV 文件
2022/04/11 Python