zoukankan      html  css  js  c++  java
  • swiper 技巧

    全屏广告高度 ,加上属性。

    html, body { position: relative; height: 100%; }

    停止自行播放

     mySwiper.stopAutoplay();

    锁住状态,不让滚动

    mySwiper.lockSwipes();

    锁住往右滚动

    mySwiper.lockSwipeToNext();

    锁定往左滚动

    mySwiper.lockSwipeToPrev();

    恢复一般状态

    mySwiper.unlockSwipes();

    <script language="javascript"> 
    var mySwiper = new Swiper('.swiper-container',{
    autoplay : 1000,
    })
    $('#btn1').click(function(){
    $("#showhtml").html('锁住状态');
    mySwiper.lockSwipes();
    })
    $('#btn2').click(function(){
    $("#showhtml").html('一般状态');
    mySwiper.unlockSwipes();
    })
    </script>

    禁止某个li不滚动

    var mySwiper = new Swiper('.swiper-container',{
    noSwiping : true,

    });

     <div class="swiper-slide swiper-no-swiping">

    用法: 一般有多个滚动效果放在同一个页面;触摸滚动的时候可能会出现“乱滚”,这个时候就需要一个时间把绑定在某一个区域 如:滚动ban时间,不会带动整个屏幕滚动。

    var slide_b = new Swiper('#swiper-container2',{
    autoplay : 5000,
    pagination : '.slide-b-pagination',
    noSwiping : false,

    });

    跳转到指定屏幕

    // 跳转到第二屏
    $('.li-a li .li2 h4').click(function(){
        mySwiper.slideTo(1, 1000, false);
    })
    <div class="slide-b " id="swiper-container2">
                        <div class="swiper-wrapper swiper-no-swiping" >
                             <div class="swiper-slide"><a href="#"><img src="../Public/images/1.jpg" /></a></div>
                             <div class="swiper-slide"><a href="#"><img src="../Public/images/2.jpg" /></a></div>
                             <div class="swiper-slide"><a href="#"><img src="../Public/images/3.jpg" /></a></div>
                        </div>
                        <div class="slide-b-pagination "></div>
                    </div>

    注:这里的swiper-no-swiping  放在 第二级, 正常的一概是放在  第三级swiper-slide 上

  • 相关阅读:
    JavaWeb核心之Servlet
    Http&Tomcat
    XML&反射
    JDBC连接池和DBUtils
    JDBC
    testng依赖
    java mysql
    eclipse自动补全的设置
    java Logger 的使用与配置
    python数据持久存储:pickle模块的基本使用
  • 原文地址:https://www.cnblogs.com/wesky/p/4662069.html
Copyright © 2011-2022 走看看