swiper 轮播图插件

一个不错的轮播插件

官网：

http://www.swiper.com.cn/

demo:

1 . 引入swiper.css文件和swiper.js 文件 （或者依赖jQuery的swiper.jquery.min.js）
2. 写入相应的html.(这里面有volist是thinkPHP遍历用的，里面是展示的图片)

<div class="swiper-container" style="height: 180px;"><div class="swiper-wrapper"><volist name="lunbojson" id="vo"><div class="swiper-slide"><a href="{pigcms:$vo['url']}"><img src="{pigcms:$vo['img']}"></a><p class="swiper-title-mps">{pigcms:$vo['title']}</p></div></volist></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div>
</div>

3 . 初始化轮播

   //定义轮播
var mySwiper = new Swiper ('.swiper-container', {initialSlide :0,//初始化索引--就是从第几哥图开始播放autoplay: swipertime,//可选选项，自动滑动autoplayDisableOnInteraction : false,//操作之后还会不会继续自动滚动direction: 'horizontal',//horizontal--横向 vertical--纵向loop: true,effect : 'slide',//切换效果  --coverflow、cube、flip\fade\slide(默认)pagination: '.swiper-pagination',  // 如果需要分页器})

需要样式上的修改可以自己定义。