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 = '<div class="bannercontrols"> <div class="leftnav" style="display: block;"></div> <div class="rightnav" style="display: block;"></div> </div>';
        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 = '<a href="'+this.data[item].url+'" rel="external nofollow" target="_blank" class="elementlink">';
        unititem += '</a>';
        unititem += '<img src="'+this.data[item].img+'" alt="'+this.data[item].title+'"/>';
        unititem += '<span class="elementoverlay"></span>';
        unititem += '<span class="leftshadow"></span>';
        unititem += '<span class="rightshadow"></span>';
        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组件代码以及使用方式：

代码如下：

<template>
 <div class="broadcast">
  <div class="htmleaf-container">
   <div class="htmleaf-content">
    <div id="postercarousel" style="margin:40px auto 0 auto;"></div>
   </div>
  </div>
 </div>
</template>
<script>
import "jquery";
import "@/static/js/postercarousel";
export default {
 data() {
  return {};
 },
 mounted() {
  this.initposter();
  console.log(postercarousel);
  21  },
 methods: {
  initposter() {
   var postercarousel = new postercarousel(
    "postercarousel",
    { classname: "postercarousel" },
    [
     {
      // img: require("../assets/callme.png"),
      img: 'http://occe.ospc.cn/upload/2016-01-18/145309107223576.jpg',
      // url: "http://www.htmleaf.com/"
     },
     {
      // img: require("../assets/liaojiewaibao.png"),
      img: "http://occe.ospc.cn/upload/2016-01-17/145302166917282.jpg",
      // url: "http://www.htmleaf.com/"
     },
     {
      img: require("../assets/ruhui.png"),
      img: "http://occe.ospc.cn/upload/2016-01-17/14530216405007.png",
      // url: "http://www.htmleaf.com/"
     },
     {
      // img: require("../assets/callme.png"),
      img: "http://occe.ospc.cn/upload/2016-01-18/145309108911041.jpg",
      // url: "http://www.htmleaf.com/"
     },
    ]
   );
  }
 }
};
</script>
<style lang="scss">
.broadcast {
 /* postercarousel */
 #postercarousel {
  width: 100% !important;
  height: 450px;
 }
 .postercarousel {
  position: relative;
  height: 100%;
  width: 100% !important;
 }
 .postercarousel img {
  max-width: 100%;
  max-height: 100%;
  border: 0 none;
  background: #888;
  display: block;
 }
 .postercarousel .contentholder {
  position: relative;
  overflow: hidden;
 }
 .postercarousel .contentholderunit {
  cursor: pointer;
  position: absolute;
  width: 83% !important;
  height: 450px;
 }
 .postercarousel .contentholderunit a.elementlink {
  display: block;
  overflow: hidden;
  z-index: 3;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
 }
 .postercarousel .contentholderunit img {
  width: 100%;
  height: 100%;
  display: block;
 }
 .postercarousel .contentholderunit .elementtitle {
 }
 .postercarousel .contentholderunit .elementoverlay {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: opacity=0;
 }
 .postercarousel .contentholderunit .leftshadow {
  position: absolute;
  top: 23px;
  left:-250px;
  // width: 250px;
  height:327px;
  background: url("../assets/images/leftshadow.png") no-repeat;
  background-size: contain;
 }
 .postercarousel .contentholderunit .rightshadow {
  position: absolute;
  top: 23px;
  right:134px;
  height: 327px;
  background: url("../assets/images/rightshadow.png") no-repeat;
  background-size: contain;
 }
 .postercarousel .bannercontrols {
 }
 .postercarousel .leftnav,
 .postercarousel .rightnav {
  cursor: pointer;
  z-index: 10;
  position: absolute;
  top: 60%;
  width: 45px;
  height: 45px;
  margin-top: -43px;
 }
 .postercarousel .leftnav {
  left: 7px;
  background: url("../assets/images/1.png") no-repeat;
  _background: none;
  _filter: progid:dximagetransform.microsoft.alphaimageloader(src="@/assets/images/slide_prev_btn.png");
 }
 .postercarousel .rightnav {
  right: 7px;
  background: url("../assets/images/2.png") no-repeat;
  _background: none;
  _filter: progid:dximagetransform.microsoft.alphaimageloader(src="@/assets/images/slide_next_btn.png");
 }
 .postercarousel .leftnav:hover {
 }
 .postercarousel .rightnav:hover {
 }
 .postercarousel .bottomnav {
  z-index: 140;
  position: absolute;
  width: 100%;
  height: 10px;
  margin-top: 400px;
  padding: 10px 0 0;
  text-align: center;
 }
 .postercarousel .bottomnavbuttonoff {
  cursor: pointer;
  overflow: hidden;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  vertical-align: top;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: #c3c3c3;
 }
 .postercarousel .bottomnavbuttonoff:hover {
  background: #aaa;
 }
 .postercarousel .bottomnavbuttonon,
 .postercarousel .bottomnavbuttonon:hover {
  background: #69aaec;
 }
 .postercarousel .bottomnavleft {
 }
 .postercarousel .bottomnavright {
 }
}
</style>

总结

以上所述是小编给大家介绍的vue.js层叠轮播效果的实例代码，希望对大家有所帮助