swiper轮播图插件

一、简介

①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轮播图插件

一、简介

二、文档

三、使用方法

四、示例（轮播图）

最新文章

热门文章