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

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 : ,
})
$('#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(, , 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 上

swiper 技巧的更多相关文章

  1. 小程序内置组件swiper,circular(衔接)使用小技巧

    swiper,关于滑块的一些效果无缝,断点,视差等等...我想这里就不用做太多的赘述,这里给大家分享一下实战项目中使用circular(衔接)的一点小特性.小技巧,当然你也可以理解为遇到了一个小坑,因 ...

  2. swiper插件使用技巧

    1.加载插件: <!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href ...

  3. 移动Web开发小技巧

    移动Web开发小技巧 添加到主屏后的标题(IOS) name="apple-mobile-web-app-title" content="标题"> 启用  ...

  4. 你所不知道的 CSS 动画技巧与细节

    怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...

  5. 移动端web开发技巧(转)

    原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我 ...

  6. Flutter实战视频-移动电商-17.首页_楼层组件的编写技巧

    17.首页_楼层组件的编写技巧 博客地址: https://jspang.com/post/FlutterShop.html#toc-b50 楼层的效果: 标题 stlessW快速生成: 接收一个St ...

  7. 探究javascript对象和数组的异同,及函数变量缓存技巧

    javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...

  8. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  9. 前端网络、JavaScript优化以及开发小技巧

    一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...

随机推荐

  1. EPUBBuilder编辑器新版

    epub全称为Electronic Publication的缩写,意为:电子出版, epub于2007年9月成为国际数位出版论坛(IDPF)的正式标准,以取代旧的开放Open eBook电子书标准,e ...

  2. jQuery 图片等比缩放

    $(function(){ $('.img-box img').load(function(){ var w = $(this).width(); var h =$(this).height(); i ...

  3. 使用AOP 实现多数据源 切换

    多数据源的实现,这里就来个实例吧 1.在 spring 的配置文件中数据源信息 <?xml version="1.0" encoding="UTF-8"? ...

  4. ELK系统中kibana展示数据的时区问题

    在采用ELK记录系统日志时,日志存入elasticsearch时,一般是以本地时区存入(如北京东8区) 在elasticsearch中直接查询时也没有任何问题,但是kibana在做日志展示时,对日志时 ...

  5. jsrender-for循环中访问父属性

    jsrender中使用for循环数据时有时需要访问父级数据. 而jsrender在循环中的父级数据存放在隐藏属性parent.parent.data中,使用案例如下 {{:#parent.parent ...

  6. Maven-常用命令

    mvn archetype:create :创建 Maven 项目 mvn compile :编译源代码 mvn deploy 发布项目 mvn test-compile :编译测试代码 mvn te ...

  7. C#-WinForm-布局-Anchor-锁定布局、Dock-填充布局、工具箱中的<容器>

    Anchor - 锁定布局,锁定控件对于其父控件或窗体的位置,保持与边框固定的距离还是居中等 Dock - 填充布局,控件是否如何进行填充 ============================== ...

  8. 系统间通信(10)——RPC的基本概念

    1.概述 经过了详细的信息格式.网络IO模型的讲解,并且通过JAVA RMI的讲解进行了预热.从这篇文章开始我们将进入这个系列博文的另一个重点知识体系的讲解:RPC.在后续的几篇文章中,我们首先讲解R ...

  9. 【LintCode】计算两个数的交集(二)

    问题分析: 用两个指针分别遍历即可. 问题求解: public class Solution { /** * @param nums1 an integer array * @param nums2 ...

  10. c3p0 泄漏

    一个很重要的资料来源 http://liu.fm/2015/07/15/c3p0/ c3p0 泄漏 标签: c3p0hibernatekillloggingspringdao 2011-06-16 1 ...