swiper实现异形轮播效果
swiper轮播—异形轮播,供大家参考,具体内容如下
最近经常会碰到很多用swiper插件做各种各样轮播图的需求,没有做过3d异形轮播图,所以研究了一下,把经验给大家分享一下
上面图片就是轮播图所要达到的效果:焦点图片居中并向前突出,自动轮播。
代码介绍:
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>
这样一个异形轮播图就好啦!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
这篇文章主要介绍了微信小程序实现action-sheet弹出底部菜单功能,结合实例形式分析了action-sheet组件弹出菜单的使用技巧,包括元素遍历、事件响应及属性设置等操作方法,并附带源码供读者下载参考,需要的朋友可以参考下2017-12-12
最新评论