导入三个文件

jquery-1.11.1.min.js,swiper.min.js,swiper.min.css

攻略教程

http://www.swiper.com.cn/api/function/2014/1218/111.html

例子:只需要定义下Ban的高度即可,position:relatival   ,这个可以不用定义

#Ban{height: 398px}

<div class="swiper-container" id="Ban">
<div class="swiper-wrapper">
<div class="swiper-slide bg-01">slider1</div>
<div class="swiper-slide bg-02">slider2</div>
<div class="swiper-slide bg-03">slider9999</div>
</div>
</div>

<script>
var mySwiper = new Swiper('#Ban',{
autoplay : 1000,

})
</script>

Swiper基本上使用的更多相关文章

  1. 前端笔记之移动端&响应式(下)默认样式&事件&惯性抛掷&swiper&loaction对象

    一.移动端默认样式 ·IOS和Android下触摸元素时出现半透明灰色遮罩 a,input,button{ -webkit-tap-highlight-color: transparent; } ·I ...

  2. 用原生js来写一个swiper滑块插件

        是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...

  3. swiper插件 纵向内容超出一屏解决办法

    1.css .swiper-slide { overflow: auto; } 2.js var swiper = new Swiper('.swiper-container', { directio ...

  4. swiper的初步使用

    1.引入文件,顺序引入(此处基于jquery,且版本至少1.7以上) <link rel="stylesheet" href="path/to/swiper-3.4 ...

  5. 关于移动端swiper的2种样式重置

    手机查看效果地址:猛戳 ,PC端查看可以缩放浏览器窗口看效果~~ 思路:主要考虑选择器优先级大于默认就可以随意撸码 注意:该demo里用的mobile-adaptive.js是让页面以rem自适应,也 ...

  6. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  7. swiper框架,实现轮播图等滑动效果

    http://www.swiper.com.cn/ 做个记录而已,这个没什么好说的,对于需要手机端开发实现触摸等方式可以看看.

  8. swiper.animate~之~可以执行两种动画的升级版的Swiper Animate

        1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... < ...

  9. swiper横向轮播--3d

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. 【转】C#判断奇偶数的函数

    // 现代流行的"程序员" public static bool IsOdd(int n) { while (true) { switch (n) { : return true; ...

  2. jsoup-提示java.net.SocketTimeoutException:Read timed out

    使用Jsoup.connect(url).get()连接某网站时偶尔会出现 java.net.SocketTimeoutException:Read timed out异常. 原因是默认的Socket ...

  3. Android 自定义Activity基类与TitleBar

    我们在开发App的时候有时候碰到多个界面有一个共同点的时候,比如,都有相同的TitleBar,并且TitleBar可以设置显示的文字.TitleBar上的点击事件,如果给每一个Activity都写一遍 ...

  4. 如何让ie 7 支持box-shadow

    box-shadow是一个很好用并且也常用的css 3属性,但是,如果我们要保证它能在ie 8及更低的版本下运行的话,需要借助一些其他的插件或文件.在这里我主要讲一下,如何用PIE.htc来解决ie ...

  5. Xcode插件VVDocumenter Alcatraz KSImageNamed等安装

    今天安装VVDocumenter,总是不起作用...所以用Alcatraz...下面介绍下Alcatraz 一.Alcatraz Alcatraz 是一款 Xcode的插件管理工具,可以用来管理XCo ...

  6. C++之再续前缘(一)——C++基础(与C语言的差异)(下)

    1.void型指针 void本身是一种数据类型,通常表示无值,不能声明void类型的变量,但是可以声明void类型的指针, void*类型的指针表示不确定的类型,是一种通用型的指针,也就是说任何类型的 ...

  7. crontab 命令

    1. crontab 可以在shell里面设置一些定时任务 格式 30 * * * * nohup sh /data/admin/adsprecise/sources/providers.sh mjo ...

  8. PHOG特征

    PHOG特征 2016年7月13日 21:07:57 什么是PHOG PHOG是Pyramid HOG(pyramid histogram of oriented gradient)的简称,是在图像尺 ...

  9. Android成长日记-Fragment的生命周期与Activity通信

    1. public void onAttach(Activity activity) 当Fragment被添加到Activity时候会回调这个方法,并且这个方法只会被回调一次 2. public vo ...

  10. bzoj2819 Nim

    题意:给定一棵带点权的树,每次询问用一条路径上的点玩Nim游戏先手是否必胜,支持单点修改. Nim游戏:所有堆的数目异或起来不为0时先手必胜,否则必败. 所以就是单点修改+路径异或和查询. 树剖一发, ...