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

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