怎么用swiper实现匀速无缝轮播
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么用swiper实现匀速无缝轮播相关的知识,希望对你有一定的参考价值。
参考技术A 1.设置属性2.然后再修改或者覆盖样式
使用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="swiper-3.4.1.min.css"> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="http://pic55.nipic.com/file/20141208/19462408_171130083000_2.jpg"/> </div> <div class="swiper-slide"><img src="http://img1.imgtn.bdimg.com/it/u=2171560580,4021371399&fm=23&gp=0.jpg" alt=""></div> <div class="swiper-slide"><img src="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="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实现匀速无缝轮播的主要内容,如果未能解决你的问题,请参考以下文章