Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件,可以用来做轮播和滑动.
-
初始化
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title></title> <link rel=stylesheet type=text/css href=swiper.css?1.1.11/> <style> .swiper-container { width: 600px; height: 300px; } .swiper-slide{ font-size: 50px } .swiper-slide:nth-of-type(1){ background-color: cornflowerblue; } .swiper-slide:nth-of-type(2){ background-color: coral; } .swiper-slide:nth-of-type(3){ background-color: yellowgreen; } </style> </head> <body> <div class=swiper-container> <div class=swiper-wrapper> <div class=swiper-slide>Slide 1</div> <div class=swiper-slide>Slide 2</div> <div class=swiper-slide>Slide 3</div> </div> <!-- 如果需要分页器 --> <div class=swiper-pagination></div> <!-- 如果需要导航按钮 --> <div class=swiper-button-prev></div> <div class=swiper-button-next></div> <!-- 如果需要滚动条 --> <div class=swiper-scrollbar></div> </div> <!--导航等组件可以放在container之外--> <script src=swiper.js?1.1.11></script> <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical',// loop: true,// // // 如果需要分页器 pagination: '.swiper-pagination',// // // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev',// // // 如果需要滚动条 scrollbar: '.swiper-scrollbar', })</script> </body></html> -
基本配置
var mySwiper = new Swiper ('.swiper-container', { // 滑动方向 // horizontal水平 // vertical垂直 direction: 'horizontal', // 初始化时候slide的索引(从0开始) initialSlide: 1, // 手指松开至slide贴合的时间 speed:3000, // 设置自动播放的事件间隔 autoplay: 2000, // 可显示数量 slidesPerView:2, // 滑块居中 centeredSlides:true, }) -
触摸设置
var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', // 触摸距离与slide滑动距离的比率 touchRatio:0.1, // 无法滑动 onlyExternal:true, // 滑块跟随手指进行移动 followFinger:false, // 定义longSwipesMs longSwipesMs:1000, longSwipes:false, shortSwipes:false, longSwipesRatio:0.5, touchAngle:10, }) 禁止切换和前进后退 <body> <div class=swiper-container> <div class=swiper-wrapper> <div class=swiper-slide stop>Slide 1</div> <!--<div class=swiper-slide swiper-no-swiping>Slide 2</div>--> <div class=swiper-slide>Slide 2</div> <div class=swiper-slide>Slide 3</div> </div> </div> <button class=prev>prev</button> <button class=next>next</button> <script src=swiper.js?1.1.11></script> <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', noSwiping:true, noSwipingClass : "stop", nextButton : ".next", prevButton : ".prev", }) </script>分页器 <style> .swiper-container { width: 600px; height: 300px; } .swiper-slide{ font-size: 50px } .swiper-slide:nth-of-type(1){ background-color: cornflowerblue; } .swiper-slide:nth-of-type(2){ background-color: coral; } .swiper-slide:nth-of-type(3){ background-color: yellowgreen; } .swiper-pagination-bullet{ width: 20px; height: 20px; } .swiper-pagination-bullet-active{ background-color: yellow; } </style> </head> <body> <div class=swiper-container> <div class=swiper-wrapper> <div class=swiper-slide>Slide 1</div> <div class=swiper-slide>Slide 2</div> <div class=swiper-slide>Slide 3</div> </div> <div class=swiper-pagination></div> </div> <script src=swiper.js?1.1.11></script> <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', pagination : ".swiper-pagination", paginationType : "bullets", paginationType : "fraction", paginationType : "progress", paginationClickable : true, paginationHide : true, paginationElement : "i", paginationBulletRender : function( swiper,index,classname ){ return "<span class='+ classname +'>"+ (index+1) +"</span>" } })</script> </body>切换效果 <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', effect : "slide", effect : "fade", effect : "cube", effect : "coverflow", effect : "flip", })</script>进程<body> <div class=swiper-container> <div class=swiper-wrapper> <div class=swiper-slide>Slide 1</div> <div class=swiper-slide>Slide 2</div> <div class=swiper-slide>Slide 3</div> </div> </div> <button id=btn>按钮</button> <script src=swiper.js?1.1.11></script> <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', }) btn.onclick = function(){ alert( mySwiper.progress ); alert( mySwiper.slides[0].progress ); console.log( mySwiper.slides[0].progress,mySwiper.slides[1].progress,mySwiper.slides[2].progress ); } setInterval(function(){ console.log( mySwiper.slides[0].progress,mySwiper.slides[1].progress,mySwiper.slides[2].progress ); },20)</script> </body> -
常用属性和回调
<body> <div class=swiper-container> <div class=swiper-wrapper> <div class=swiper-slide>Slide 1</div> <div class=swiper-slide>Slide 2</div> <div class=swiper-slide>Slide 3</div> </div> </div> <button id=btn>按钮</button> <script src=swiper.js?1.1.11></script> <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', speed : 2000, onSlideChangeStart : function(){ console.log( "开始滑动" ); }, onSlideChangeEnd : function(){ console.log( "滑动结束" ); } }) console.log( mySwiper.width ); console.log( mySwiper.height ); btn.onclick = function(){ console.log( mySwiper.translate ); console.log( mySwiper.activeIndex ); console.log( mySwiper.previousIndex ); } </script> </body>
以上就是一个简单实用的js插件–Swiper的详细内容，更多请关注双恒网络其它相关文章！
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 一个简单实用的js插件
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 一个简单实用的js插件
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
