h5仿轉轉banner輪播效果

h5實現banner圖與背景圖同時切換的效果（swiper插件）

1、要在.swiper-box的div外面加一個div#big-bg，設置樣式position：absolute；

 

2、css樣式中寫好3個背景圖樣式：.banner-bg1、.banner-bg2、.banner-bg3

3、需要查看項目工程里swiper.js的源代碼(node_modules/swiper/dist/js/swiper.js)，找到控制自動輪播和觸屏滑動的事件中emit出的方法名：autoplay、touchMove

 

 

4、在需要用到swiper插件的組件的初始化swiper的方法里，加入該方法的回調函數

_.initSwiper(){
    var mySwiper = new Swiper(".swiper-box",{
        ....
      
    on:{
    beforeSlideChangeStart:function(){
        if(this.activeIndex == 0){
        this.$('#big-bg').addClass("banner-bg1");
        }
    },
    touchMove:function(){
        let that = this;
        setTimeout(function() {      //因為touchMove觸發后，activeIndex更新延后了，所以延遲10ms再判斷activeMove值
        if(that.activeIndex == 0){
            that.$('#big-bg').removeClass("banner-bg2");
            that.$('#big-bg').removeClass("banner-bg3");
            that.$('#big-bg').addClass("banner-bg1");
        }else if(that.activeIndex == 1){
            that.$('#big-bg').removeClass("banner-bg1");
            that.$('#big-bg').removeClass("banner-bg3");
            that.$('#big-bg').addClass("banner-bg2");
        }else if(that.activeIndex == 2){
            that.$('#big-bg').removeClass("banner-bg1");
            that.$('#big-bg').removeClass("banner-bg2");
            that.$('#big-bg').addClass("banner-bg3");
        }else{
            that.$('#big-bg').removeClass("banner-bg1");
            that.$('#big-bg').removeClass("banner-bg3");
            that.$('#big-bg').addClass("banner-bg2");
        }
        }, 10);
    },
    autoplay:function(){
        if(this.activeIndex == 0){
            this.$('#big-bg').removeClass("banner-bg2");
            this.$('#big-bg').removeClass("banner-bg3");
            this.$('#big-bg').addClass("banner-bg1");
        }else if(this.activeIndex == 1){
            this.$('#big-bg').removeClass("banner-bg1");
            this.$('#big-bg').removeClass("banner-bg3");
            this.$('#big-bg').addClass("banner-bg2");
        }else if(this.activeIndex == 2){
            this.$('#big-bg').removeClass("banner-bg1");
            this.$('#big-bg').removeClass("banner-bg2");
            this.$('#big-bg').addClass("banner-bg3");
        }else{
            this.$('#big-bg').removeClass("banner-bg1");
            this.$('#big-bg').removeClass("banner-bg3");
            this.$('#big-bg').addClass("banner-bg2");
        }
    },    
}