vue.js层叠轮播效果的实例代码

最近写公司项目有涉及到轮播banner，一般的ui框架无法满足产品需求；所以自己写了一个层叠式轮播组件；现在分享给大家；

主要技术栈是vue.js ;javascript;jquery；确定实现思路因工作繁忙，暂时不做梳理了；直接贴代码参考；

此组件是基于jquer封装，在vue项目中使用首先需要先安装jquery插件：指令：npm install jquery,安装完成之后再webpack.base.conf.js配置插件：

plugins: [
 new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
 }),
]

主要实现逻辑js文件：postercarousel.js；

代码如下：

(function(jq){
    function postercarousel(o, options, data){
    this.parent = jq("#"+ o);
    this.body  = jq("body");
    if (this.parent.length <= 0) { 
      return false;
    }
     
    this.options = jq.extend({}, postercarousel.options, options);
    if(typeof(data) !== 'object') return false;
 
    this.data = data || {};
    this.reset();
    //处理页面resize
    var _this = this;
    jq(window).resize(function(){
        _this.reset();
    });
  };
  postercarousel.prototype = {
    reset: function(options){
      if(typeof(options) == 'object'){
        jq.extend(this.options, options);  
      }
      if(parseInt(this.body.outerWidth())>1255 || navigator.userAgent.indexOf('iPad') !== -1){
        this.options.width = 970;  
      }else{
        this.options.width = 970;  
      }
      this.total = this.data.length;
      this.pageNow = this.options.initPage;
      this.preLeft = 0;
      this.nextLeft = this.options.width-530;
      this.preNLeft = -530;
      this.nextNLeft = this.options.width;
      this.pageNowLeft = (this.options.width-640)/2
      this.drawContent();
    },
    drawContent: function(){
      this.parent.empty();
      this.parent.css({width:this.options.width+"px", height:this.options.height+"px", position: "relative"});
      this.content = document.createElement("DIV");
      this.content.className = this.options.className;
      this.content.cssText = "width:"+this.options.width+"px;height:"+this.options.height+"px;cursor:move;position:absolute;";
        this.bottomNav = document.createElement("DIV");
        this.bottomNav.className = "bottomNav";
        for(var i=1; i<= this.total; i++){
          var bottomItem = document.createElement("DIV");
          bottomItem.className = "bottomNavButtonOFF";
          if(i == this.pageNow){
            bottomItem.className = "bottomNavButtonOFF bottomNavButtonON";
          }
          bottomItem.setAttribute("ref", i);
          this.bottomNav.appendChild(bottomItem);
        }
        this.content.appendChild(this.bottomNav);
        this.bannerControls = '
 
 
 
';
        this.content.innerHTML += this.bannerControls;
 
      this.contentHolder = document.createElement("DIV");
      this.contentHolder.style.width = this.options.width + 'px';
      this.contentHolder.style.height = this.options.height + 'px';
       
      for(var item=0, i = 1, l= this.data.length ; item < l ; ++item, ++i){
        var contentHolderUnit = document.createElement("DIV");
        contentHolderUnit.className = "contentHolderUnit";
        contentHolderUnit.setAttribute("ref", i);
        contentHolderUnit.setAttribute("id", 'contentHolderUnit' + (i));
        var unitItem = '';
        unitItem += '';
        unitItem += '';
        unitItem += '';
        unitItem += '';
        unitItem += '';
        contentHolderUnit.innerHTML = unitItem;
        this.contentHolder.appendChild(contentHolderUnit);
      }
      this.content.appendChild(this.contentHolder);
      this.parent.append(this.content);
      this.parent.css({overflow:'hidden'});
      this.initContent();
      this.bind();
      this.start();
    },
    initContent: function(){
      contentHolderUnit = this.parent.find(".contentHolderUnit");
      contentHolderUnit.css({width:'0px',height:'0px', opacity: 0, left:this.options.width/2+'px', zIndex:0, marginTop: '135px'});
      this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+")").css({width:'640px',height:'450', opacity: 1, left: this.pageNowLeft+'px', zIndex: 3, marginTop: 0});
      this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .elementOverlay").css({opacity:0});
      this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .leftShadow").css({opacity:1});
      this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .rightShadow").css({opacity:1});
       
      var pre = this.pageNow > 1 ? this.pageNow -1: this.total;
      var next = this.pageNow == this.total ? 1 : this.pageNow + 1;
      this.parent.find(".contentHolderUnit:nth-child("+pre+")").css({opacity: 1, left: this.preLeft+'px',height: '450', width: '530px', zIndex: 0, marginTop: '23px'});
      this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4});
      this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0});
      this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0});
 
      this.parent.find(".contentHolderUnit:nth-child("+next+")").css({opacity: 1, left: this.nextLeft+'px',height: '450', width: '530px', zIndex: 0, marginTop: '23px'});
      this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4});
      this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0});
      this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0});
    },
    bind: function(){
      this.leftNav = this.parent.find(".leftNav");
      this.rightNav = this.parent.find(".rightNav");
      this.bottonNav = this.parent.find(".bottomNavButtonOFF");
      this.lists = this.parent.find(".contentHolderUnit");
      var _this = this;
      this.parent.mouseover(function(){
        _this.stop();
        _this.leftNav.show();
        _this.rightNav.show();
      });
      this.parent.mouseout(function(){
        _this.start();
        //_this.leftNav.hide();
        //_this.rightNav.hide();
      });
       
      _this.leftNav.click(function(){
        _this.turn("right");           
      });
      _this.rightNav.click(function(){
        _this.turn("left");           
      });
      _this.bottonNav.click(function(){
        var ref = parseInt(this.getAttribute("ref"));
        if(_this.pageNow == ref) return false;
 
        if(_this.pageNow < ref){
          var rightAbs = ref - _this.pageNow;
          var leftAbs = _this.pageNow + _this.total - ref;
        }else{
          var rightAbs = _this.total - _this.pageNow + ref;
          var leftAbs = _this.pageNow - ref;
        }
        if(leftAbs < rightAbs){
           dir = "right";  
        }else{
           dir = "left";  
        }
 
        _this.turnpage(ref, dir);
        return false;
      });
       
      _this.lists.click(function(e){
        var ref = parseInt(this.getAttribute("ref"));
        if(_this.pageNow == ref) {
          return true;
        }else{
          e.preventDefault();
        }
        if(_this.pageNow < ref){
          var rightAbs = ref - _this.pageNow;
          var leftAbs = _this.pageNow + _this.total - ref;
        }else{
          var rightAbs = _this.total - _this.pageNow + ref;
          var leftAbs = _this.pageNow - ref;
        }
        if(leftAbs < rightAbs){
           dir = "right";  
        }else{
           dir = "left";  
        }
        _this.turnpage(ref, dir);  
 
      });
    },
    initBottomNav: function(){
        this.parent.find(".bottomNavButtonOFF").removeClass("bottomNavButtonON");
        this.parent.find(".bottomNavButtonOFF:nth-child("+this.pageNow+")").addClass("bottomNavButtonON");
    },
    start: function(){
      var _this = this;
      if(_this.timerId) _this.stop();
      _this.timerId = setInterval(function(){
        if(_this.options.direct == "left"){
          _this.turn("left");  
        }else{
          _this.turn("right");  
        }
      }, _this.options.delay);
    },
    stop: function(){
      clearInterval(this.timerId);
    },
    turn: function(dir){
      var _this = this;
       
      if(dir == "right"){
        var page = _this.pageNow -1;
        if(page <= 0) page = _this.total;
      }else{
        var page = _this.pageNow + 1;
        if(page > _this.total) page = 1;
      }
      _this.turnpage(page, dir);
    },
    turnpage: function(page, dir){
      var _this = this;
      if(_this.locked) return false;
      _this.locked = true;
      if(_this.pageNow == page) return false;
       
      var run = function(page, dir, t){
        var pre = page > 1 ? page -1: _this.total;
        var next = page == _this.total ? 1 : page + 1;
        var preP = pre - 1 >= 1 ? pre-1 : _this.total;
        var nextN = next + 1 > _this.total ? 1 : next+1;
        if(pre != _this.pageNow && next != _this.pageNow){
          var nowpre = _this.pageNow > 1 ? _this.pageNow -1: _this.total;
          var nownext = _this.pageNow == _this.total ? 1 : _this.pageNow + 1;
          _this.parent.find(".contentHolderUnit:nth-child("+nowpre+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t);
          _this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t);
          _this.parent.find(".contentHolderUnit:nth-child("+nownext+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t);
        }
        if(dir == 'left'){          
          _this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").css({zIndex: 0});
         
           
          _this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4});
          _this.parent.find(".contentHolderUnit:nth-child("+pre+")").animate({opacity: 1, left: _this.preLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '23px'}, t);
          _this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0});
          _this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0});
           
           
          _this.parent.find(".contentHolderUnit:nth-child("+page+")").css({zIndex: 3});
          _this.parent.find(".contentHolderUnit:nth-child("+page+")").animate({opacity: 1, left: _this.pageNowLeft+'px', height: '450', width: '640px', zIndex: 3, marginTop: '0'}, t);
          _this.parent.find(".contentHolderUnit:nth-child("+page+") .elementOverlay").css({opacity:0});
          _this.parent.find(".contentHolderUnit:nth-child("+page+") .leftShadow").css({opacity:1});
          _this.parent.find(".contentHolderUnit:nth-child("+page+") .rightShadow").css({opacity:1});
           
          _this.parent.find(".contentHolderUnit:nth-child("+next+")").css({opacity: 0, left: _this.nextNLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '85px'});
          _this.parent.find(".contentHolderUnit:nth-child("+next+")").animate({opacity: 1, left: _this.nextLeft+'px', height: '450', width:"530px", zIndex: 2, marginTop: '23px'}, t);
          _this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4});
          _this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0});
          _this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0});
          _this.parent.find(".contentHolderUnit:nth-child("+preP+")").css({zIndex:0});
          _this.parent.find(".contentHolderUnit:nth-child("+preP+")").animate({width:'530px',height:'350px', opacity: 0, left:_this.preNLeft+'px', zIndex:0, marginTop: '85px'},t, "", function(){_this.locked=false;});
           
           
        }else{
          _this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").css({zIndex: 0});
           
          _this.parent.find(".contentHolderUnit:nth-child("+next+")").css({zIndex:2});
          _this.parent.find(".contentHolderUnit:nth-child("+next+")").animate({opacity: 1, left: _this.nextLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '23px'}, t);
          _this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4});
          _this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0});
          _this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0});
           
          _this.parent.find(".contentHolderUnit:nth-child("+page+")").css({zIndex: 3}, t);
          _this.parent.find(".contentHolderUnit:nth-child("+page+")").animate({opacity: 1, left: _this.pageNowLeft+'px', height: '450', width: '640px', zIndex: 3, marginTop: '0px'}, t);
          _this.parent.find(".contentHolderUnit:nth-child("+page+") .elementOverlay").css({opacity:0});
          _this.parent.find(".contentHolderUnit:nth-child("+page+") .leftShadow").css({opacity:1});
          _this.parent.find(".contentHolderUnit:nth-child("+page+") .rightShadow").css({opacity:1});
           
          _this.parent.find(".contentHolderUnit:nth-child("+pre+")").css({opacity: 0, left: _this.preNLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '85px'});
          _this.parent.find(".contentHolderUnit:nth-child("+pre+")").animate({opacity: 1, left: _this.preLeft+'px', height: '450', width: '530px', zIndex: 2, marginTop: '23px'}, t);
          _this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4});
          _this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0});
          _this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0});
           
          _this.parent.find(".contentHolderUnit:nth-child("+nextN+")").css({zIndex:0});
          _this.parent.find(".contentHolderUnit:nth-child("+nextN+")").animate({width:'530px',height:'450', opacity: 0, left:_this.nextNLeft+'px', zIndex:0, marginTop: '85px'}, t, "",function(){_this.locked=false;});
        }
       
        _this.pageNow = page;
        _this.initBottomNav();
      };
       
      run(page, dir,_this.options.speed);          
       
    }
     
  };
 
  postercarousel.options = {
    offsetPages : 3,//默认可视最大条数
    direct : "left",//滚动的方向
    initPage : 1,//默认当前显示第几条
    className : "postercarousel",//最外层样式
    autoWidth : false,//默认不用设置宽
    // width : 100,//最外层宽，需要使用的时候在传,默认由程序自动判断
    height :450,//最外层高 
    delay : 3000,//滚动间隔（毫秒）
    speed : 500 //滚动速度毫秒
  };
   
  window.postercarousel = postercarousel;
})(jQuery)

相关vue组件代码以及使用方式：

代码如下：

最后

为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈：866109386.欢迎大家进群交流讨论，学习交流，共同进步。

当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们，祝福大家在往后的工作与面试中一切顺利。