一、简介

①Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

②Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。

③主要是为IOS而设计的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。

二、文档

①中文网址：http://2.swiper.com.cn/

②中文网地址：http://www.swiper.com.cn/

③Swiper目前有Swiper2、Swiper3、Swiper4几个版本，每个版本的使用方法可能会有所不同，具体参照文档

三、使用方法

①加载

  • 首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。
      <link rel="stylesheet" href="path/to/swiper.min.css">

           ...

　　　　    ...

　　  <script src="path/to/swiper.min.js"></script>

　
  • 如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js
　　　   ...

　　<link rel="stylesheet" href="path/to/swiper.min.css">

　　　　 ...

　　<script src="path/to/jquery.js"></script>

　　<script src="path/to/swiper.jquery.min.js"></script>

②HTML内容

<div class="swiper-container">

　　<div class="swiper-wrapper">

　　　　<div class="swiper-slide">Slide 1</div>

　　　　<div class="swiper-slide">Slide 2</div>

　　　　<div class="swiper-slide">Slide 3</div>

　　</div>

　　<!-- 如果需要分页器 -->

　　<div class="swiper-pagination"></div>

　　<!-- 如果需要导航按钮 -->

　　<div class="swiper-button-prev"></div>

　　<div class="swiper-button-next"></div>

　　<!-- 如果需要滚动条 -->

　　<div class="swiper-scrollbar"></div>

</div>

③初始化

  • 初始化Swiper：最好是挨着</body>标签 （函数调用）
<script>

　　var mySwiper = new Swiper ('.swiper-container', {

　　　　direction: 'vertical',

　　　　loop: true,

　　　　// 如果需要分页器

　　　　pagination: '.swiper-pagination',

　　　　// 如果需要前进后退按钮

　　　　nextButton: '.swiper-button-next',

　　　　prevButton: '.swiper-button-prev',

　　　　// 如果需要滚动条

　　　　scrollbar: '.swiper-scrollbar',

　　})

</script>

</body>
  • 如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化
<script type="text/javascript">

　　window.onload = function() {

　　...

　　}

</script>

或者这样（Jquery和Zepto）

<script type="text/javascript">

　　$(document).ready(function () {

　　　　...

　　})

</script>

四、示例（轮播图）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>轮播图</title>

    <!-- 引入swiper3.0 css文件 -->

    <link rel="stylesheet" href="swiper/css/swiper.min.css">

    <style>

        *{

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            -webkit-box-sizing: border-box;

        }

        ul{

            list-style: none;

        }

        a{

            text-decoration: none;

        }

        .container {

            position: relative;

            width: 750px;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <!-- 版心 -->

    <div class="container">

        <!-- 轮播图 -->

        <div class="swiper-container">

            <ul class="swiper-wrapper">

                <li class="swiper-slide"><a href="#"><img src="data:images/banner01.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner02.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner03.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner04.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner05.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner06.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner07.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner08.jpg" alt=""></a></li>

            </ul>

            <!-- 分页器 -->

            <div class="swiper-pagination"></div>

        </div>

    </div>

    <!-- 引入swiper3.0插件脚本 -->

    <script src="swiper/js/swiper.min.js"></script>

    <!-- js初始化脚本 -->

    <script>

       window.onload=function(){

            /* 轮播图 */

            new Swiper('.swiper-container',{

                autoplay:1000,

                loop:true,

                pagination:'.swiper-pagination',

                autoplayDisableOnInteraction:false

            });

       }

    </script>

</body>

</html>

swiper轮播图插件的更多相关文章

  1. Swiper轮播图

    今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码:   <!DOCTYPE html>   <html lang="en">   < ...

  2. Vue轮播图插件---Vue-Awesome-Swiper

    轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...

  3. vue轮播图插件之vue-awesome-swiper

    移动端轮播图插件,在使用iview图形界面插件中的carousel组件无法实现触摸滑动后,转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesome-swip ...

  4. js 原生轮播图插件

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

  5. jquery, js轮播图插件Swiper3

    轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...

  6. 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

  7. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  8. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  9. 第124天：移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

随机推荐

  1. php的json_encode第二个参数学习及应用

    php5.4以上: json_encode($data, JSON_FORCE_OBJECT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE); p ...

  2. 【1】TOPK最小的K个数（多种方法比较）

    (头条) 最小的第K个数也是和这题topK一样的思路 1.全排序  时间复杂度O(nlogn) 2.Partiton思想 时间复杂度O(n)  (因为不需要像快排一样对所有的分段都两两Partitio ...

  3. 怎样遍历NodeList对象

    因为NodeList对象是一个类似数组的对象, 且它自带了一个 forEach() 方法, 因此可以使用 forEach() 遍历, 它的用法和 Array 里面的 forEach() 是完全一样的. ...

  4. vs配置opencv（只需一次）

    一.配置环境变量(bin) 二.配置属性表 1.配置包含(include)目录 2.配置库(lib)目录 3.配置依赖项(.lib)

  5. Android为TV端助力之热修复原理

    通过源码我们知道Android加载类是通过ClassLoad类里面的findClass先去查找的,如下图所示 通过看源码我们知道,ClassLoad是一个抽象类,它本身并没有实现findclass() ...

  6. Nginx 常用命令并实现最基本的反向代理

    nginx 命令 测试配置文件格式是否正确:$ nginx -t 启动:nginx 重启:nginx -s reload 获取nginx进程号: ps -ef|grep nginx 停止进程(mast ...

  7. vue.js 样式绑定

    简单用法 <div v-bind:height="bindStyle"> 复杂用法 <div v-bind:style="bindStyle" ...

  8. list集合排序案例

    // List集合排序: Collections.sort(list, new Comparator<Object>(){ public int compare(Object obja, ...

  9. k8s pod节点调度及k8s资源优化

    一.k8s pod 在节点间调度控制 k8s起pod时,会通过调度器scheduler选择某个节点完成调度,选择在某个节点上完成pod创建.当需要在指定pod运行在某个节点上时,可以通过以下几种方式: ...

  10. Replication Controller 和 Replica Set

    使用Replication Controller . Replica Set管理Pod Replication Controller (RC) 简写为RC,可以使用rc作为kubectl工具的快速管理 ...