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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
网页中的图片的处理方法与代码
Nov 26 Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
JavaScript 大数据相加的问题
Aug 03 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
vue.js实现二级菜单效果
Oct 19 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 如何向 MySQL 发送数据
2006/10/09 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
js实现打字小游戏
2019/12/17 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
用Python进行基础的函数式编程的教程
2015/03/31 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
Python实现中值滤波去噪方式
2019/12/18 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
keras得到每层的系数方式
2020/06/15 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
小组名称和口号
2014/06/09 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
vue实现同时设置多个倒计时
2021/05/20 Vue.js
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技