码迷,mamicode.com
首页 > 其他好文 > 详细

swiper轮播图插件

时间:2018-07-24 13:56:48      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:按钮   标签   纯java   轻量级   init   com   image   asc   ext   

一、简介

①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="images/banner01.jpg" alt=""></a></li>
                <li class="swiper-slide"><a href="#"><img src="images/banner02.jpg" alt=""></a></li>
                <li class="swiper-slide"><a href="#"><img src="images/banner03.jpg" alt=""></a></li>
                <li class="swiper-slide"><a href="#"><img src="images/banner04.jpg" alt=""></a></li>
                <li class="swiper-slide"><a href="#"><img src="images/banner05.jpg" alt=""></a></li>
                <li class="swiper-slide"><a href="#"><img src="images/banner06.jpg" alt=""></a></li>
                <li class="swiper-slide"><a href="#"><img src="images/banner07.jpg" alt=""></a></li>
                <li class="swiper-slide"><a href="#"><img src="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轮播图插件

标签:按钮   标签   纯java   轻量级   init   com   image   asc   ext   

原文地址:https://www.cnblogs.com/EricZLin/p/9359415.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!