首页 > 代码库 > 使用swiper来实现轮播图
使用swiper来实现轮播图
使用swiper来实现轮播图
swiper实现轮播图几乎是没有一点点技术含量，但是用起来却很方便，包括对移动端的支持也很好。
由于简单这里当然就不会去详细介绍了，推荐两个网址：
1.http://www.swiper.com.cn/usage/index.html 它很简明地告诉了你应该如何去搭建这样的框架。
2.http://www.swiper.com.cn/api/ 这里讲述了我们应该如何去设置更多的功能。
下面是一个简单的例子，可做参考。
<!DOCTYPE html><html><head> <title>swiper</title> <style> .swiper-container { width: 600px; height: 300px; } .swiper-slide{ width: 600px; height: 300px; } .swiper-slide img{ width: 100%; height: 100%; } </style> <link rel="stylesheet" href=http://www.mamicode.com/"swiper-3.4.1.min.css"></head><body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src=http://www.mamicode.com/"http://pic55.nipic.com/file/20141208/19462408_171130083000_2.jpg"/> </div> <div class="swiper-slide"><img src=http://www.mamicode.com/"http://img1.imgtn.bdimg.com/it/u=2171560580,4021371399&fm=23&gp=0.jpg" alt=""></div> <div class="swiper-slide"><img src=http://www.mamicode.com/"http://img3.imgtn.bdimg.com/it/u=2714944387,2569159950&fm=23&gp=0.jpg" alt=""></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> <script src=http://www.mamicode.com/"swiper-3.4.1.min.js"></script> <script type="text/javascript"> window.onload = function() { var mySwiper = new Swiper (‘.swiper-container‘, { // 轮播图的方向，也可以是vertical方向 direction:‘horizontal‘, //播放速度 loop: true, // 自动播放时间 autoplay:1000, // 播放的速度 speed:2000, // 如果需要分页器，即下面的小圆点 pagination: ‘.swiper-pagination‘, // 如果需要前进后退按钮 nextButton: ‘.swiper-button-next‘, prevButton: ‘.swiper-button-prev‘, // 如果需要滚动条 scrollbar: ‘.swiper-scrollbar‘, }); } </script></body></html>
当然，其中不使用style来定义也可以实现轮播，是全屏的效果。
使用swiper来实现轮播图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。