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

网络编程 2025/11/6 佚名

3 2 1

最近写公司项目有涉及到轮播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="/UploadFiles/2021-04-02/'+this.data[item].img+'">

相关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="/UploadFiles/2021-04-02/slide_prev_btn.png">

总结
以上所述是小编给大家介绍的vue.js层叠轮播效果的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

vue.js层叠轮播,vue轮播

标签：

vue.js层叠轮播,vue轮播

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“vue.js层叠轮播效果的实例代码”

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

暂无“vue.js层叠轮播效果的实例代码”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2025年11月06日

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

vue.js层叠轮播,vue轮播

解决Vue在封装了Axios后手动刷新页面拦截器无效的问题

vue-cli 构建骨架屏的方法示例

评论“vue.js层叠轮播效果的实例代码”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接