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

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

(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)

<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>