swiper輪播圖插件

時間 2019-11-12

標籤 swiper 插件简体版

原文原文鏈接

1、簡介

①Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等經常使用效果。javascript

②Swiper 是一款免費以及輕量級的移動設備觸控滑塊的框架，使用硬件加速過渡（若是該設備支持的話）。主要使用與移動端的網站、網頁應用程序（web apps），以及原生的應用程序（native apps）。css

③主要是爲IOS而設計的，同時，在Android、WP8系統以及現代桌面瀏覽器也有着良好的用戶體驗。html

2、文檔

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

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

③Swiper目前有Swiper二、Swiper三、Swiper4幾個版本，每一個版本的使用方法可能會有所不一樣，具體參照文檔web

3、使用方法

①加載瀏覽器

首先加載插件，須要用到的文件有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內容app

<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>

4、示例（輪播圖）

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。