一、简介

①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. 【Linux】Ubuntu替换阿里源

    --------------------------------------------------------- 参考文章:https://www.jianshu.com/p/97c35d569aa ...

  2. [cf 1236 E] Alice and the Unfair Game

    题意: 给定一个长度为m的序列$A$,你有一个长度为n的棋盘,可以任选一个位置x作为起点. 在时刻$[1,m+1]$你可以向左或向右移动一格. 设时刻i你移动后所在的位置为$B_i$,你需要满足对于任 ...

  3. nodeJs编写的简单服务器

    一.简单的nodeJs写的 http 服务器 1.先Hello world,创建最简单的 Node 服务器(server.js) var http = require("http" ...

  4. Drool7s 什么叫KIE和生命周期-系列03课

    KIE是缩写,knowledge is everything.可以理解成一个上层接口,本质是由很多个实现类去实现功能的. 另外关于drool7s的生命周期,请看下图 本文只是让你了解drools7的一 ...

  5. C# 单元测试学习笔记

    1.什么是单元测试         2.单元测试的好处 (1)协助程序员尽快找到代码中bug的具体位置 (2)能够让程序员对自己的程序更有自信 (3)能够让程序员在提交项目之前就将代码变的更加的强壮 ...

  6. 纯css实现省略号，兼容火狐，IE9，chrome

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

  7. C#MongDB数据库取某时间段内的数据

    BsonDocument bsonDoc = new BsonDocument(); bsonDoc.Add("TimeData", new BsonDocument() { { ...

  8. mybatis添加sql打印功能

    添加配置文件: mybatis-config.xml <?xml version="1.0" encoding="UTF-8"?> <!DOC ...

  9. CSS的一个小bug，Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`.

    在vue重新渲染页面的时候,报了一个错误: 翻译了报错信息后,Gradient has outdated direction syntax. New syntax is like to left in ...

  10. oracle删除表空间和用户

    步骤一: 删除tablespace(登录对应用户删除表空间) DROP TABLESPACE tablespace_name INCLUDING CONTENTS AND DATAFILES; 步骤二 ...