导入三个文件

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. 折叠ListView

    转自 http://blog.csdn.net/hnyzwtf/article/details/50487228 1 activity_main.xml <?xml version=" ...

  2. swift项目实战--微博的未登录界面的实现,和监听未登录界面两个按钮的两种实现方法

    1.未登录界面的实现 微博项目中,用户不登录的话,显示的是未登录的界面.项目中TabBarVC的子控制器都是tableViewVC,所以抽取了父类,让父类判断用户是否登录,决定显示什么样的界面.loa ...

  3. SpringMVC 参数传递

    使用@RequestParam 注解获取GET请求或POST请求提交的参数: 获取Cookie的值:使用@CookieValue : 根据不同的Web请求方法,映射到不同的处理方法:使用登陆页面作示例 ...

  4. 提示reg不是批处理命令怎么办

    'regsvr32' 不是内部或外部命令,也不是可运行的程序或批处理文件.请按任意键继续. . . 系统环境变量被改了进入控制面板>高级>环境变量>系统变量,Path双击一下,填入C ...

  5. 数据库开发基础-SQl Server 视图

    1.视图的概述            视图其实就是一条查询sql语句,用于显示一个或多个表或其他视图中的相关数据.视图将一个查询的结果作为一个表来使用,因此视图可以被看作是存储的查询或一个虚拟表.视图 ...

  6. asp.net mvc 外网获取不到port问题解决

    var IPandPort = Request.ServerVariables["HTTP_HOST"];

  7. 回合对战制游戏第一篇(初识java)

    回合对战制游戏第一篇 一,所谓的java. java是一门完全面向对象的编程语言,而之前所接触到的C语言是一门面向有一个过程的语音,对于两个的区别应该有一个清楚的认识. java的第一个内容. 类和对 ...

  8. 自动attach到iis

    可以不用手动attachToProcess. 先找到自己的网站Solution.右键property 2) 3)保存后  可以看到process 当前进程就是w3p3的iis的进程名字

  9. 虚拟机克隆后找不到eth0

    使用 VMware 虚拟机的克隆功能,快速复制已安装好的 Linux 系统. 克隆完成之后,发现没有 eth0 网卡. [解决方法] 1. 编辑 /etc/udev/rules.d/70-persis ...

  10. Windows批处理以服务的方式启动解决思路(ShadowsockR注册成Windows Service)

    我以ShadowsockR的server启动来解释: 由于这东西是python,如果要启动,可以写一个批处理(python.exe server.py)来启动,但是我观察发现启动的时候是附带pytho ...