菜单 搜索
首页 前端知识 vue el-carousel走马灯实现显示多张（5张）和（7张）

vue el-carousel走马灯实现显示多张（5张）和（7张）

2024-09-01 00:09:02 前端知识 前端哥 704 491 我要收藏

vue el-carousel走马灯实现显示多张（5张）和（7张）
父组件不用修改，仅在子组件源码的基础上进行修改即可
直接上代码

<template>
  <div>
      <el-carousel v-if="type=='item5_xybjzq' || type=='item5_qdbjzq'" :interval="400000" type="card" height="120px" indicator-position=none ref="myCarousel">
        <div class="el-carousel_div_bg"><div ></div></div>
        <myCarsouselItem v-for="(item,index) in allYxbjMsgs" :key="index"
        :class="{
          'el-carousel__item_buy':item.type=='buy',
          'el-carousel__item_sale':item.type=='sale',
        }">
          <div  class="div-label">
            <div><span>{{item.name}}</span><span class="font-style-12 span-padding">{{item.title}}</span></div>
            <div class="div-container_center div-padding"><span class="font-style-20">{{item.num}}</span>万</div>
            <div ><i class="el-icon el-icon_position"></i><span class="font-style-12">{{item.position}}</span></div>
            <div class="div-padding2"><i class="el-icon el-icon_phone"></i><span class="font-style-12">{{item.phone}}</span></div>
          </div>
        </myCarsouselItem>
      </el-carousel>
      <el-carousel v-if="type=='item5_dljybj' || type=='item5_zsssbbj'" :interval="400000" type="card" height="120px" indicator-position=none ref="myCarousel">
        <myCarsouselItem2 v-for="(item,index) in allQdbjMsgs" :key="index"
        :class="{
          'el-carousel__item_dljybj':type=='item5_dljybj',
          'el-carousel__item_zsssbbj':type=='item5_zsssbbj',
        }">
          <div  class="div-label div-wbqs">
            <div class="div-padding3"><span class="font-style-20">{{item.title}}</span></div>
            <div class="div-padding2 font-style-12">报价系统评级<span class="font-style-20">{{item.bjxtpj}}</span></div>
            <div class="div-padding2 font-style-12">打包价格<span>{{item.dbjg}}</span></div>
            <div class="div-padding2 font-style-12">产品期限<span>{{item.cpqx}}</span></div>
            <div class="div-padding2 font-style-12">产品额度<span>{{item.cped}}</span></div>
          </div>
        </myCarsouselItem2>
      </el-carousel>
  </div>
</template>
<script>
import myCarsouselItem from './item-zrscbj.vue';
import myCarsouselItem2 from './item-wbqs.vue';
export default {
  name: 'PaperPart',
  props: {
    type:{
      type: String,
      require: true
    },
  },
  components: {myCarsouselItem,myCarsouselItem2},
  data () {
    return {
      //paperList: [],
        allYxbjMsgs: [
        {
          name: "张三",
          type:"buy",
          title:"拟买入私募12号",
          num: "300",
          position: "济南二环东路营业部",
          phone: "15088888888",
        },
        {
          name: "李四",
          type:"sale",
          title:"拟买入私募12号",
          num: "280",
          position: "济南二环东路营业部",
          phone: "15088888888",
        },
        {
          name: "王五",
          type:"buy",
          title:"拟买入私募12号",
          num: "500",
          position: "济南二环东路营业部",
          phone: "15088888888",
        },
        {
          name: "赵六",
          type:"buy",
          title:"拟买入私募12号",
          num: "120",
          position: "济南二环东路营业部",
          phone: "15088888888",
        },
        {
          name: "小七",
          type:"sale",
          title:"拟买入私募12号",
          num: "350",
          position: "济南二环东路营业部",
          phone: "15088888888",
        },
        // {
        // name: "106",
        // bjMsg: "拟卖出100万 私募6号",
        // lxOrg: "xxx营业部",
        // phone: "15088888888",
        // },
        //         {
        // name: "107",
        // bjMsg: "拟卖出100万 私募6号",
        // lxOrg: "xxx营业部",
        // phone: "15088888888",
        // },
        //         {
        // name: "108",
        // bjMsg: "拟卖出100万 私募6号",
        // lxOrg: "xxx营业部",
        // phone: "15088888888",
        // },
        //         {
        // name: "109",
        // bjMsg: "拟卖出100万 私募6号",
        // lxOrg: "xxx营业部",
        // phone: "15088888888",
        // },
        //         {
        // name: "110",
        // bjMsg: "拟卖出100万 私募6号",
        // lxOrg: "xxx营业部",
        // phone: "15088888888",
        // },
        ],
        allQdbjMsgs: [
        {
          title: "九州证券1",
          bjxtpj: "BB",
          dbjg: "3.3%",
          cpqx: "12月期",
          cped: "1亿元",
        },
        {
          title: "华兴证券2",
          bjxtpj: "BB",
          dbjg: "3.0%",
          cpqx: "12月期",
          cped: "2亿元",
        },
        {
          title: "中泰证券3",
          bjxtpj: "AA",
          dbjg: "3.5%",
          cpqx: "12月期",
          cped: "4亿元",
        },
        {
          title: "中信证券4",
          bjxtpj: "BB",
          dbjg: "2.3%",
          cpqx: "12月期",
          cped: "3千万元",
        },
        {
          title: "华泰证券5",
          bjxtpj: "BB",
          dbjg: "3.3%",
          cpqx: "12月期",
          cped: "1亿元",
        },
        {
          title: "中信建投证券6",
          bjxtpj: "BB",
          dbjg: "3.3%",
          cpqx: "12月期",
          cped: "5000万元",
        },
        {
          title: "中原证券7",
          bjxtpj: "BB",
          dbjg: "3.3%",
          cpqx: "12月期",
          cped: "1亿元",
        },
        {
          title: "招商证券8",
          bjxtpj: "BB",
          dbjg: "3.3%",
          cpqx: "12月期",
          cped: "1000万元",
        },
        ],
    }
  },
  mounted(){
  },
  methods: {
  },
}
</script>
<style lang="scss" scoped>
.el-carousel_div_bg{
    width: 100%;
    height: 90%;
    position: relative; 
    div{
      position: absolute;
      top:20px;
      left:29px;
      width: 93%;
      height: 80%;
      background: url("~@/assets/images/information-show/carousel-bg.png") no-repeat;
      background-size: cover;
      background-position: center;
    }
}
.div-wbqs{
  padding-left: 25px !important;
}
.div-label{
    padding: 10px 10px 5px 15px;
    .div-container_center{
      display: flex;
      justify-content: center;
      align-items: center;
      .font-style-20{
        font-weight: bold;
        font-size: 20px;
        line-height: 23px;
      }
    }
    .span-padding{
      padding-left: 10px;
    }
    .div-padding{
      padding:8px  0;
    }
    .div-padding2{
      padding-top:4px;
    }
    .div-padding3{
      padding-bottom:8px;
    }
    .el-icon{
      height: 14px;
      width: 14px;
      margin-right: 5px;
      text-align: left;
      vertical-align: middle;
      display:inline-flex;
    }
    .font-style-12{
        font-weight: 500;
        font-size: 12px;
        line-height: 14px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        span{
          padding-left: 10px;
        }
    }
}
.el-carousel__item_buy {
  background: url("~@/assets/images/information-show/bg_cardG_01.png") no-repeat;
  background-size: cover;
  color: #995200;
  .el-icon_position{
      background: url("~@/assets/images/information-show/icon_01.png") no-repeat;
  }
  .el-icon_phone{
      background: url("~@/assets/images/information-show/icon_02.png") no-repeat;
  }
}
 
.el-carousel__item_sale {
  background: url("~@/assets/images/information-show/bg_cardP_02.png") no-repeat;
  background-size: cover;
  color: #1D3864;
  .el-icon_position{
      background: url("~@/assets/images/information-show/icon_position_02.png") no-repeat;
  }
  .el-icon_phone{
      background: url("~@/assets/images/information-show/icon_phone_01.png") no-repeat;
  }
}
 
.el-carousel__item_dljybj {
  background: url("~@/assets/images/information-show/bg_card_03.png") no-repeat;
  background-size: cover;
  color: #995200;
}
.el-carousel__item_zsssbbj {
  background: url("~@/assets/images/information-show/icon_card_04.png") no-repeat;
  background-size: cover;
  color: #1D3864;
}
.el-carousel__item{
  border-radius:10px;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
}
</style>
复制

下面是显示5张的子组件代码：
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/b79d513eb30c4b29b78311f20e3fe69e.png注：左右最下面两张是做的背景图可以忽略，实际就5显示了张卡片

<template>
  <div
    v-show="ready"
    class="el-carousel__item"
    :class="{
      'is-active': active,
      'el-carousel__item--card': $parent.type === 'card',
      'is-in-stage': inStage,
      'specialIndex': specialIndex,
      'is-hover': hover,
      'is-animating': animating
    }"
    @click="handleItemClick"
    :style="itemStyle">
    <div
      v-if="$parent.type === 'card'"
      v-show="!active"
      class="el-carousel__mask">
    </div>
    <slot></slot>
  </div>
</template>
 
<script>
  import { autoprefixer } from 'element-ui/src/utils/util';
  //const CARD_SCALE = 0.83;
  export default {
    name: 'ElCarouselItem',
    props: {
      name: String,
      label: {
        type: [String, Number],
        default: ''
      },
    },
 
    data() {
      return {
        hover: false,
        translate: 0,
        scale: 1,
        active: false,
        ready: false,
        inStage: false,
        specialIndex: false,
        animating: false
      };
    },
 
    methods: {
      processIndex(index, activeIndex, length) {
        let index_=-10;
        if(activeIndex == 0) {
          switch(index){
            case length-2: index_=-2; break;
            case length-1: index_=-1; break;
            case activeIndex: index_=0; break;
            case 1: index_=1; break;
            case 2: index_=2; break;
            default:
              index_=-10;
          }
          return index_;
        }if(activeIndex == 1) {
          switch(index){
            case length-1: index_=-2; break;
            case 0: index_=-1; break;
            case activeIndex: index_=0; break;
            case 2: index_=1; break;
            case 3: index_=2; break;
            default:
              index_=-10;
          }
          return index_;
        } else if(activeIndex == length-2){
          switch(index){
            case length-4: index_=-2; break;
            case length-3: index_=-1; break;
            case activeIndex: index_=0; break;
            case length-1: index_=1; break;
            case 0: index_=2; break;
            default:
              index_=-10;
          }
         return index_;
        }else if(activeIndex == length-1){
          switch(index){
            case length-3: index_=-2; break;
            case length-2: index_=-1; break;
            case activeIndex: index_=0; break;
            case 0: index_=1; break;
            case 1: index_=2; break;
            default:
              index_=-10;
          }
          return index_;
        }else if(activeIndex >= 2) {
          switch(index){
            case activeIndex-2: index_=-2; break;
            case activeIndex-1: index_=-1; break;
            case activeIndex: index_=0; break;
            case activeIndex+1: index_=1; break;
            case activeIndex+2: index_=2; break;
            default:
              index_=-10;
          }
          return index_;
        }
      },
 
      calcCardTranslate(index, activeIndex) {
        const parentWidth = this.$parent.$el.offsetWidth;
        if(index == 0){
          return parentWidth*(0.5-0.22/2)
        }else if(Math.abs(index) == 1){
          return index>0?parentWidth*(0.5+0.22/2-0.08):parentWidth*(0.5-(0.28-0.08+0.22/2));
        }else{
          return index>0?parentWidth*(0.5+0.22/2+0.28-0.08-0.13):parentWidth*(0.5-(0.28-0.08+0.22/2)-(0.28-0.13));
        }
      },
 
      calcTranslate(index, activeIndex, isVertical) {
        const distance = this.$parent.$el[isVertical ? 'offsetHeight' : 'offsetWidth'];
        return distance * (index - activeIndex);
      },
 
      translateItem(index, activeIndex, oldIndex) {
        const parentType = this.$parent.type;
        const parentDirection = this.parentDirection;
        const length = this.$parent.items.length;
        if (parentType !== 'card' && oldIndex !== undefined) {
          this.animating = index === activeIndex || index === oldIndex;
        }
        index = this.processIndex(index, activeIndex, length);
        if (parentType === 'card') {
          if (parentDirection === 'vertical') {
            console.warn('[Element Warn][Carousel]vertical direction is not supported in card mode');
          }
          this.inStage = Math.round(Math.abs(index)) <= 1;
          this.specialIndex = Math.round(Math.abs(index)) >= 3;
          this.active = index === 0;
          this.translate = this.calcCardTranslate(index, activeIndex);
          this.scale = Math.abs(index)==0 ? 1 : Math.abs(index)==1? 0.9 : Math.abs(index)==2? 0.8 : 0.7;
        } else {
          this.active = index === activeIndex;
          const isVertical = parentDirection === 'vertical';
          this.translate = this.calcTranslate(index, activeIndex, isVertical);
        }
        this.ready = true;
      },
 
      handleItemClick() {
        const parent = this.$parent;
        if (parent && parent.type === 'card') {
          const index = parent.items.indexOf(this);
          parent.setActiveItem(index);
        }
      }
    },
 
    computed: {
      parentDirection() {
        return this.$parent.direction;
      },
 
      itemStyle() {
        const translateType = this.parentDirection === 'vertical' ? 'translateY' : 'translateX';
        const value = `${translateType}(${ this.translate }px) scale(${ this.scale })`;
        const style = {
          transform: value
        };
        return autoprefixer(style);
      }
    },
 
    created() {
      this.$parent && this.$parent.updateItems();
    },
 
    destroyed() {
      this.$parent && this.$parent.updateItems();
    }
  };
</script>
<style lang="scss">
  .el-carousel__item--card {
      width: 28%;
  }
  .el-carousel__arrow--left {
    left: 15px;
  }
  .el-carousel__arrow--right {
    right: 15px;
  }
  .el-carousel__item {
    cursor: pointer;
    z-index: 1;
  }
  .el-carousel__item--card.is-in-stage {
    z-index: 2;
    .el-carousel__mask{
      display: none;
    }
  }
  .el-carousel__item--card.is-active {
    z-index: 3;
    width: 22%;
  }
  .specialIndex{
    z-index: 0
  }
</style>
复制

下面是显示7张的子组件代码：
在这里插入图片描述

<template>
  <div
    v-show="ready"
    class="el-carousel__item"
    :class="{
      'is-active': active,
      'el-carousel__item--card': $parent.type === 'card',
      'is-in-stage': inStage,
      'specialIndex': specialIndex,
      'is-hover': hover,
      'is-animating': animating
    }"
    @click="handleItemClick"
    :style="itemStyle">
    <div
      v-if="$parent.type === 'card'"
      v-show="!active"
      class="el-carousel__mask">
    </div>
    <slot></slot>
  </div>
</template>
 
<script>
  import { autoprefixer } from 'element-ui/src/utils/util';
  //const CARD_SCALE = 0.83;
  export default {
    name: 'ElCarouselItem',
    props: {
      name: String,
      label: {
        type: [String, Number],
        default: ''
      },
    },
 
    data() {
      return {
        hover: false,
        translate: 0,
        scale: 1,
        active: false,
        ready: false,
        inStage: false,
        specialIndex: false,
        animating: false
      };
    },
 
    methods: {
      processIndex(index, activeIndex, length) {
        let index_=-10;
        if(activeIndex == 0) {
          switch(index){
            case length-3: index_=-3; break;
            case length-2: index_=-2; break;
            case length-1: index_=-1; break;
            case activeIndex: index_=0; break;
            case 1: index_=1; break;
            case 2: index_=2; break;
            case 3: index_=3; break;
            default:
              index_=-10;
          }
          return index_;
        }if(activeIndex == 1) {
          switch(index){
            case length-2: index_=-3; break;
            case length-1: index_=-2; break;
            case 0: index_=-1; break;
            case activeIndex: index_=0; break;
            case 2: index_=1; break;
            case 3: index_=2; break;
            case 4: index_=3; break;
            default:
              index_=-10;
          }
          return index_;
        }if(activeIndex == 2) {
          switch(index){
            case length-1: index_=-3; break;
            case 0: index_=-2; break;
            case 1: index_=-1; break;
            case activeIndex: index_=0; break;
            case 3: index_=1; break;
            case 4: index_=2; break;
            case 5: index_=3; break;
            default:
              index_=-10;
          }
          return index_;
        }else if(activeIndex == length-3){
          switch(index){
            case length-6: index_=-3; break;
            case length-5: index_=-2; break;
            case length-4: index_=-1; break;
            case activeIndex: index_=0; break;
            case length-2: index_=1; break;
            case length-1: index_=2; break;
            case 0: index_=3; break;
            default:
              index_=-10;
          }
         return index_;
        }else if(activeIndex == length-2){
          switch(index){
            case length-5: index_=-3; break;
            case length-4: index_=-2; break;
            case length-3: index_=-1; break;
            case activeIndex: index_=0; break;
            case length-1: index_=1; break;
            case 0: index_=2; break;
            case 1: index_=3; break;
            default:
              index_=-10;
          }
         return index_;
        }else if(activeIndex == length-1){
          switch(index){
            case length-4: index_=-3; break;
            case length-3: index_=-2; break;
            case length-2: index_=-1; break;
            case activeIndex: index_=0; break;
            case 0: index_=1; break;
            case 1: index_=2; break;
            case 2: index_=3; break;
            default:
              index_=-10;
          }
          return index_;
        }else if(activeIndex >= 3) {
          switch(index){
            case activeIndex-3: index_=-3; break;
            case activeIndex-2: index_=-2; break;
            case activeIndex-1: index_=-1; break;
            case activeIndex: index_=0; break;
            case activeIndex+1: index_=1; break;
            case activeIndex+2: index_=2; break;
            case activeIndex+3: index_=3; break;
            default:
              index_=-10;
          }
          return index_;
        }
      },
      calcCardTranslate(index, activeIndex) {
        const parentWidth = this.$parent.$el.offsetWidth;
        if(index == 0){
          return parentWidth*(0.5-0.28/2)
        }else if(Math.abs(index) == 1){
          return index>0?parentWidth*(0.5+0.28/2)+10:parentWidth*(0.5-0.28/2-0.28)-10;
        }else if(Math.abs(index) == 2){
          return index>0?parentWidth*(0.5+0.28/2)+40:parentWidth*(0.5-0.28/2-0.28)-40;
        }else if(Math.abs(index) == 3){
          return index>0?parentWidth*(0.5+0.28/2)+70:parentWidth*(0.5-0.28/2-0.28)-70;
        }else{
          return index>0?parentWidth*(0.5+0.28/2):parentWidth*(0.5-0.28/2-0.28);
        }
      },
 
      calcTranslate(index, activeIndex, isVertical) {
        const distance = this.$parent.$el[isVertical ? 'offsetHeight' : 'offsetWidth'];
        return distance * (index - activeIndex);
      },
 
      translateItem(index, activeIndex, oldIndex) {
        const parentType = this.$parent.type;
        const parentDirection = this.parentDirection;
        const length = this.$parent.items.length;
        if (parentType !== 'card' && oldIndex !== undefined) {
          this.animating = index === activeIndex || index === oldIndex;
        }
        index = this.processIndex(index, activeIndex, length);
        if (parentType === 'card') {
          if (parentDirection === 'vertical') {
            console.warn('[Element Warn][Carousel]vertical direction is not supported in card mode');
          }
          this.inStage = Math.round(Math.abs(index)) <= 1;
          this.specialIndex = Math.round(Math.abs(index)) >= 3;
          this.active = index === 0;
          this.translate = this.calcCardTranslate(index, activeIndex);
          this.scale = Math.abs(index)<=1 ? 1 : Math.abs(index)==2? 0.90 : Math.abs(index)==3? 0.8 : 0.7;
        } else {
          this.active = index === activeIndex;
          const isVertical = parentDirection === 'vertical';
          this.translate = this.calcTranslate(index, activeIndex, isVertical);
        }
        this.ready = true;
      },
 
      handleItemClick() {
        const parent = this.$parent;
        if (parent && parent.type === 'card') {
          const index = parent.items.indexOf(this);
          parent.setActiveItem(index);
        }
      }
    },
 
    computed: {
      parentDirection() {
        return this.$parent.direction;
      },
 
      itemStyle() {
        const translateType = this.parentDirection === 'vertical' ? 'translateY' : 'translateX';
        const value = `${translateType}(${ this.translate }px) scale(${ this.scale })`;
        const style = {
          transform: value
        };
        return autoprefixer(style);
      }
    },
 
    created() {
      this.$parent && this.$parent.updateItems();
    },
 
    destroyed() {
      this.$parent && this.$parent.updateItems();
    }
  };
</script>
<style lang="scss" scoped>
  .el-carousel__item--card {
      width: 28%;
  }
  .el-carousel__arrow--left {
    left: 15px;
  }
  .el-carousel__arrow--right {
    right: 15px;
  }
  .el-carousel__item {
    cursor: pointer;
    z-index: 1;
  }
  .el-carousel__item--card.is-in-stage {
    z-index: 2;
    .el-carousel__mask{
      display: none;
    }
  }
  .el-carousel__item--card.is-active {
    z-index: 3;
  }
  .specialIndex{
    z-index: 0
  }
</style>
复制

参考:
https://blog.csdn.net/yu17310133443/article/details/106278680
https://blog.csdn.net/weixin_58860430/article/details/126781582

转载请注明出处或者链接地址：https://www.qianduange.cn//article/17362.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！