摘要：項目背景圖片輪播是前端項目必有項，當前有很多效果很酷炫的輪播插件，例如。此處應該有掌聲，哈哈簡而言之，就是當需要一個簡單的輪播時，可以選用，自己寫一個組件。舉個栗子，就是我實現的這個基于實現分頁組件，移動端和端均適用哦。

圖片輪播是前端項目必有項，當前有很多效果很酷炫的輪播插件，例如Swiper。
但是當項目中的圖片輪播只需要一個很簡單的輪播樣式，比如這樣的

我們引用這樣一個110k的大插件，就大材小用了。再安利一下，swiper2.x和swiper3.x對移動和PC端支持情況如下圖

當當當當~~~
我們今天的主角登場了，thebird/Swipe，這個插件完成了圖片輪播需要的基本功能，只有14.2k,真真的輕量級 啊。還有，還有

翻譯一下，就是俺們全支持，不管你是PC端（IE7+）還是移動端瀏覽器。此處應該有掌聲，哈哈~

簡而言之，就是當需要一個簡單的輪播時，可以選用thebird/Swipe，自己寫一個組件。

舉個栗子，就是我實現的這個—— 基于vue實現swipe分頁組件，移動端和PC端均適用哦。

一般情況，輪播圖片因為是要經常換的，故在后臺定制，定制內容如下

沒有定制，必須在代碼里寫的話，也是可以的，造一個data數組swipeInfo

data：{
    swipeInfo:[{
        href:"http://www.baidu.com",
        imgSrc:""
    },{
        href:"http://www.baidu.com",
        imgSrc:""
    },{
        href:"http://www.baidu.com",
        imgSrc:""
    }]
},
components: {
    "swipe-module": require("pagination-swipe"),
},

在html中綁定該數據

按照swipe構造html框架，添加了pagination塊

vue構造組件

//index.js
require("./style.less");
var Swipe = require("swipe");

Vue.component("pagination-swipe",{
    props: ["swipeinfo"],
    template: require("raw!./template.html"),
    data: function() {
        return {
            mySwipe: {},
            slideNum: {},
        };
    },
    ready: function() {
        var self = this;
        //獲取子組件中分頁小圈圈
        var slides = self.$els.swipe.getElementsByClassName("swipe-pagination-switch");
        self.mySwipe = new Swipe(self.$els.swipe, {
            startSlide: 0,
            continuous: true,
            speed: 1000,
            auto: 4000,
            stopPropagation: false,
            callback: function(index, elem) {
                //渲染分頁小圈圈
                for (var i = 0; i < slides.length; i++) {
                    if (i != index) {
                        slides[i].style.opacity = "0.2";
                        slides[i].style.background = "#000";
                    } else {
                        slides[index].style.opacity = "1";
                        slides[index].style.background = "#ee3a4a";
                    }
                }
            },
        });
        self.slideNum = self.mySwipe.getNumSlides() - 1;
    },
    methods: {
        //點擊底部小圈圈，跳到其所對應頁
        slideToCur: function(index) {
            var self = this;
            self.mySwipe.slide(index, 300);
        },
    }
});

.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
    height: 200/@rem;
    .swipe-wrap {
        position: relative;
        overflow: hidden;
        height: 100%;
        div {
            float: left;
            width: 100%;
            position: relative;
            margin: 0;
            a {
                width: 100%;
                height: 100%;
                background-position: center 0;
                background-repeat: no-repeat;
                background-color: transparent;
                display: block;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .pagination {
        text-align: center;
        position: relative;
        bottom: 40/@rem;
        cursor: pointer;
    }
    .swipe-pagination-switch {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        background: #000;
        opacity: 0.2;
        margin: 0 8px;
        z-index: 10;
        &:first-child {
            background: #ee3a4a;
        }
    }
    .swipe-active-switch {
        opacity: 1;
    }
}

目前基于vue有一個vue-swipe組件,親測輕量簡單易用,基本功能齊全,是做swipe輪播圖很好的選擇

但是這個有一些問題,

如果樣式放在scoped中,底部小圈圈就不見了~所以,這個的樣式使用需要注意樣式污染問題.

IE9下沒有滑動效果，主要是ie9對css3動畫的不兼容