1、引入文件
<script src="public/js/swiper.min.js"></script> <link rel="stylesheet" href="public/css/swiper.min.css">
2、滑动图片的HTML代码结构
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="public/images/poster_7.png" class="img_responsive margin_auto" > </div> <div class="swiper-slide"> <img src="public/images/poster_6.png" class="img_responsive margin_auto" > </div> <div class="swiper-slide"> <img src="public/images/poster_5.png" class="img_responsive margin_auto" > </div> <div class="swiper-slide"> <img src="public/images/poster_4.png" class="img_responsive margin_auto" > </div> <div class="swiper-slide"> <img src="public/images/poster_3.png" class="img_responsive margin_auto" > </div> <div class="swiper-slide"> <img src="public/images/poster_2.png" class="img_responsive margin_auto" > </div> <div class="swiper-slide"> <img src="public/images/poster_1.png" class="img_responsive margin_auto" > </div> </div> <!-- 如果需要滚动条 --> <!--<div class="swiper-scrollbar"></div>--> <!-- 如果需要分页器 --> <!-- <div class="swiper-pagination"></div>--> </div>
3、页面加载完之后调用方法
//广告位滑动 mySwiper = new Swiper ('.swiper-container', { //滑动方向为水平 direction: 'horizontal', //是否循环 loop: true, //是否自动滑动 //autoplay:5000, //分页器的位置，在class为swiper-pagination的容器中，容器在页面任意位置，不受限制 pagination: '.swiper-pagination', //滑动之后触发的事件 onSlideChangeEnd: function(swiper){ //获取当前 var activeIndex = swiper.activeIndex; } // 如果需要滚动条 //scrollbar: '.swiper-scrollbar' }); //显示前一张页面 $('.btn_prev').click(function(){ mySwiper.slidePrev(); }); //显示前一张页面 $('.btn_next').click(function(){ mySwiper.slideNext(); });
大小: 186.6 KB 查看图片附件
