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 相关文章推荐
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
简介AngularJS中$http服务的用法
Feb 06 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 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编程函数安全篇
2013/01/08 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
jquery div拖动效果示例代码
2013/12/08 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
python和pyqt实现360的CLable控件
2014/02/21 Python
Python、Javascript中的闭包比较
2015/02/04 Python
python Django批量导入不重复数据
2016/03/25 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python for 循环获取index索引的方法
2019/02/01 Python
python图像处理入门(一)
2019/04/04 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
Android面试题及答案
2015/09/04 面试题
2014年扫黄打非工作总结
2014/12/03 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
辛亥革命观后感
2015/06/02 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript