记录-移动端网页触摸内容滑动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>

 

转载于:https://www.cnblogs.com/dscs/p/5005697.html