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',  // 如果需要分页器
  })

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