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

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

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

此组件是基于jquer封装，在vue项目中使用首先需要先安装jquery插件：指令：npm install jquery,安装完成之后再webpack. .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) !== \' \') 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) == \' \'){
        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=\"element \">\';
        unitItem += \'</a>\';
        unitItem += \'<img src=\"\'+this.data[item].img+\'\" alt=\"\'+this.data[item]. +\'\"/>\';
        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>
< >
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/\"
     },
    ]
   );
  }
 }
};
</ >
<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.element  {
  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 .element  {
 }
 .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层叠轮播效果的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

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

浏览：675 2026-05-01

继续阅读与本文标签相同的文章

Synopsys 选出 2018 年最具潜力与创新力开源项目

TLSv 1.3 网络安全标准通过，带来更安全的网络环境

特别推荐 2026年05月19日星期二

精彩发现

热门标签

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

浏览：675 2026-05-01

继续阅读与本文标签相同的文章

2026-05-19栏目： 教程

2026-05-19栏目： 教程

2026-05-19栏目： 教程

2026-05-19栏目： 教程

2026-05-19栏目： 教程

2026-04-23栏目： 教程

2026-04-23栏目： 教程

2026-04-23栏目： 教程

2026-04-23栏目： 教程

2026-04-24栏目： 教程

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

相关文章

2026-05-19栏目：教程

2026-05-19栏目：教程

2026-05-19栏目：教程

2026-05-19栏目：教程

2026-05-19栏目：教程

2026-04-23栏目：教程

2026-04-23栏目：教程

2026-04-23栏目：教程

2026-04-23栏目：教程

2026-04-24栏目：教程

特别推荐 2026年05月19日星期二