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

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

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

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

翻譯一下，就是俺們?nèi)С郑还苣闶荘C端（IE7+）還是移動(dòng)端瀏覽器。此處應(yīng)該有掌聲，哈哈~

簡而言之，就是當(dāng)需要一個(gè)簡單的輪播時(shí)，可以選用thebird/Swipe，自己寫一個(gè)組件。

舉個(gè)栗子，就是我實(shí)現(xiàn)的這個(gè)—— 基于vue實(shí)現(xiàn)swipe分頁組件，移動(dòng)端和PC端均適用哦。

一般情況，輪播圖片因?yàn)槭且?jīng)常換的，故在后臺(tái)定制，定制內(nèi)容如下

沒有定制，必須在代碼里寫的話，也是可以的，造一個(gè)data數(shù)組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中綁定該數(shù)據(jù)

按照swipe構(gòu)造html框架，添加了pagination塊

vue構(gòu)造組件

//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: {
        //點(diǎn)擊底部小圈圈，跳到其所對應(yīng)頁
        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有一個(gè)vue-swipe組件,親測輕量簡單易用,基本功能齊全,是做swipe輪播圖很好的選擇

但是這個(gè)有一些問題,

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

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