导入三个文件

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. [转]实体类(VO,DO,DTO)的划分

    原文地址:http://blog.sina.com.cn/s/blog_7a4cdec80100wkyh.html 经常会接触到VO,DO,DTO的概念,本文从领域建模中的实体划分和项目中的实际应用情 ...

  2. Swift开发小技巧--自定义转场动画

    自定义转场动画 个人理解为重写了被弹出控制器的modal样式,根据自己的样式来显示modal出来的控制器 例:presentViewController(aVC, animated: true, co ...

  3. 【BZOJ 4569】【SCOI 2016】萌萌哒

    http://www.lydsy.com/JudgeOnline/problem.php?id=4569 用ST表表示所有区间,根据ST表中表示的区间长度种一棵nlogn的树,类似线段树,每个节点的左 ...

  4. jquery获取多重input的方式

    获取input的checked值是否为true: 第一种: if($("input[name=item][value='val']").attr('checked')==true) ...

  5. wamp中修改后mysq数据库l闪退无法登陆解决办法

    WampServer安装后密码是空的,   修改一般有三种方式:   一是通过phpMyAdmin直接修改:   二是使用WAMP的MySql控制台修改.     三是重置密码    第一种:   1 ...

  6. Leetcode 114, Flatten Binary Tree to Linked List

    根据提示,本题等价于pre order traverse遍历,并且依次把所有的节点都存成right child,并把left child定义成空集.用递归的思想,那么如果分别把左右子树flatten成 ...

  7. asp.net接收ajax请求参数时为空的现象

    如题,如果使用ajax请求asp.net后台时,如果使用jquery时,默认是添加了请求头,使后台能识别,并能通过Request对象进行获取. 但是如果你使用的是window.XMLHttpReque ...

  8. linux时间时区设置

    用linux的时候大家可能会遇到时间不对,时区不对的情况.比如使用网上廉价的国外的linux的vps,时区是国外的.那么如何在不劳烦管理员的情况下自己动手呢?首先要了解硬件时钟与系统时钟,计算机上的B ...

  9. Android——旋转屏幕导致Activity重建解决方法

    Android开发文档上专门有一小节解释这个问题.简单来说,Activity是负责与用户交互的最主要机制,任何“设置”(Configuration)的改变都可能对Activity的界面造成影响,这时系 ...

  10. HDU 1007 Quoit Design

    传送门 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Problem Des ...