记录-移动端网页触摸内容滑动js插件

需求：

在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>