swiper.js-全屏效果實現

bi3643 8年前發布 | 82K 次閱讀 JavaScript開發

來自： http://my.oschina.net/u/2352644/blog/614984

針對swiper.js的全屏動畫切換，我們已經簡單分析和介紹過一次：

http://my.oschina.net/u/2352644/blog/487902 這個里面非常簡單的分析了如何加入我們的動畫效果，swiper現在已經出現了3.0版本，我們這里就是使用swiper3.0去開發我們的更貼近真實的項目。

下載swiper3.0 http://www.swiper.com.cn/download/index.html 推薦下載演示包，這樣我們可以充分了解swiper都可以實現什么！

一，原理簡單分析

1.加入動畫

上一個博客只是分析了在active類名下加入我們的動畫樣式就可完成我們的效果呈現，這里我們二次的分析其中的更多知識，了解別人的原理我們在構建類似效果就可以自己動手了。

首先打開demo文件下，預覽這個html頁面，和復制此html頁面：

然后打開dist文件夾，把這個html重新命名自己喜歡的名稱，我的是demo2

demo2.html就是我們的實戰頁面，我們打開頁面，把css和js的引入路徑從全局改為dist下的css和js上：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <!-- Demo styles -->
    <style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    </style>
</head>
<body>
    <!-- Swiper -->
    <div>
        <div id="aa">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
            <div>Slide 7</div>
            <div>Slide 8</div>
            <div>Slide 9</div>
            <div>Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div></div>
    </div>
    <!-- Swiper JS -->
    <script src="js/swiper.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical'
    });
 
 
    </script>
</body>
</html>

我們預覽測試，pc就可以查看，保證沒有任何問題，我們firebug查看是不是當前所在位置有active的類名：