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 上

  • 相关阅读:
    【WinAPI】User32.dll注释
    Unity 用ml-agents机器学习造个游戏AI吧(1) (Windows环境配置)
    Unity C#笔记 容器类
    Unity C#笔记 委托/事件/Action/Func/Lambda表达式
    Unity C#笔记 协程
    游戏AI之模糊逻辑
    游戏AI之路径规划
    游戏设计模式——黑板模式
    游戏AI之决策结构—行为树
    游戏AI之感知
  • 原文地址:https://www.cnblogs.com/wesky/p/4662069.html
Copyright © 2011-2022 走看看