时间:2021-05-26
Swiper是移动端的一款非常强大的触摸滑动插件,下面代码只展示一些常用的配置,具体可以查看官网api
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="swiper.min.css" rel="external nofollow" > <style> /*假设设计稿是640 轮播图区域640*300*/ html{ font-size:100px; } html,body{ width:100%; overflow-x:hidden; } .swiper-container{ margin:0 auto; height:3rem; overflow:hidden; } .swiper-slide{ height:3rem; } .swiper-slide img{ width:100%; height:100%; } </style></head><body> <section class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img class='swiper-lazy' data-src="img/banner/banner1.jpg" alt=""> <div class='swiper-lazy-preloader'></div> </div> <div class="swiper-slide"> <img class='swiper-lazy' data-src="img/banner/banner2.jpg" alt=""> <div class='swiper-lazy-preloader'></div> </div> <div class="swiper-slide"> <img class='swiper-lazy' data-src="img/banner/banner3.jpg" alt=""> <div class='swiper-lazy-preloader'></div> </div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div> </section> <script src='swiper.min.js'></script> <script> //REM 响应式 ~function(){ var desN = 640,winW = document.documentElement.clientWidth,ratio = winW / desN; document.documentElement.style.fontSize = ratio*100 + "px"; }(); //初始化swiper实现区域的滑动 //new Swiper([container selector],[settings]) var swiper1 = new Swiper('.swiper-container',{ loop:true,//无缝衔接滚动 effect:'cube',//滑动效果 autoplay:3000, autoplayDisableOnInteraction:false,//用户操作swiper之后不禁止autoplay pagination:'.swiper-pagination', paginationType:'progress',//分页器样式 lazyLoading:true,//图片延迟加载 lazyLoadingInPrevNext:true//前一个和后一个延迟加载 }) </script></body></html>总结
以上所述是小编给大家介绍的JS中Swiper的使用和轮播图效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Vue-Awesome-Swiper轮播图插件,可以同时支持Vue.js(1.X~2.X),兼顾PC和移动端,随着vue的广泛使用,其中插件swiper也算是使
轮播图在网站中使用的比例非常之高,自己手写一个轮播比较费时间,而使用swiper(swiper3)轮播插件能很方便做出图片轮播效果,兼容性好,而且还支持响应式轮
制作轮播图时,一般都会有自动轮播和自动轮播间隔时间的设定,这是简单的轮播图效果,而制作进度条轮播效果,需要用到swiper3的api来使用,进度条走满的时间是跟
一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似。1.安装v
微信小程序swiper组件构建轮播图的实例实现效果图:wxml基础文件:swiper-item仅可放置在组件中,宽高自动设置为100%。参数设置:autopla