需求:
在webapp中需要左右滑动手机,移动主页的轮播图。也可用在引导页(欢迎页)的大图左右滑动
可用:
百度:swiper插件
在项目中导入插件,这里只有部分代码,具体百度swiper
<link rel="stylesheet" href="/res/vankemobilestyle/css/swiper.css">
<div class="index_roll"> <div class="swiper-container"> <div class="swiper-wrapper" id="homeShufflingImage" style="width:auto"> </div> <!-- Add Pagination --> <div class="swiper-pagination" ></div> </div> <script> $(function(){ if(!$.cookie('hasWatch')){ $("#homeShufflingImage").append('<div class="swiper-slide" style="text-align: center;width: auto"><img src="../res/vankemobilestyle/images/guide01.jpg" width="100%"/></div>' +'<div class="swiper-slide" style="text-align: center;width: auto"><img alt="" src="../res/vankemobilestyle/images/guide02.jpg" width="100%" /></div>' +'<div class="swiper-slide" style="text-align: center;width: auto"><img alt="" src="../res/vankemobilestyle/images/guide03.jpg" width="100%" /></div>' +'<div class="swiper-slide" style="text-align: center;width: auto"><img alt="" src="../res/vankemobilestyle/images/guide04.jpg" width="100%" /></div>' +'<div class="swiper-slide" style="text-align: center;width: auto"><a href="/webMoblie/mbNewHouse" style="height:100%;"><img alt="" src="../res/vankemobilestyle/images/guide05.png" width="100%" /></a></div>' ); //主要代码 var swiper = new Swiper('.index_roll .swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, centeredSlides: true, autoplayDisableOnInteraction: false, autoplay:false }); $(".swiper-slide img").height($(window).height()); $.cookie('hasWatch', 'ture', { expires: 100, path: '/' }); } else window.location.href ='/webMoblie/mbIndex'; }) </script> </div>