hfysite/components/banner/banner.vue

<template>
  <div class="banner " v-ratio="(baseHeight/baseWidth)">

    <!--      轮播图片,通过show切换-->
    <div
        v-for="(item,i) in banners"
        :key="'img-'+item.id"
        :class="{
            'banner-show':true,
            'banner-show-now':i===bannerIndex
          }"
        v-show="i===bannerIndex"
    >
      <!--        图片框-->
      <img :src="item.img" :alt="item.title">
      <!--        文本框-->
      <div class="w-p1200 h-full py-2 border-box relative" v-show="showText">
        <div class="view-text">
          <div class="title">{{item.title}}</div>
          <div class="content indent-8">
            {{item.text}}
          </div>
        </div>
      </div>

    </div>


    <!--      点击切换控制 -->
    <div class="banner-control bottom-14">
      <div
          v-for="(item,i) in banners"
          :key="'handle_cjs-'+item.id"
          :class="{
               'banner-handle_cjs':true,
               'banner-handle_cjs-now':i===bannerIndex
               }"
          @click="changeBanner(i)"
      >

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "banner",
  props: {
    waitTime: {default:5000}
  },
  data(){
    return {
      banners:[{
        id: '1',
        url:'#/recommends',
        title: 'text',
        text: '1234',
        img:'image/banner/index.jpg',
        diffColor: "#000"
      },{
        id: '2',
        url:'#/recommend?recommendId=2',
        title: '',
        text: '',
        img:'image/banner/banner_show.png',
        diffColor: "#fafafa"
      },{
        id: '3',
        url:'http://',
        title: '',
        text: '',
        img:'image/banner/banner_gb28181.jpg',
        diffColor: "#ffffff"
      },
      ],
      bannerIndex:0,
      timer:null,
      showText: false,
      baseWidth: 1903,
      baseHeight: 630,
      // 比例
    }
},mounted() {
    this.cursor()
  },
  directives: {
    // 为元素设定比例
    ratio: {
      bind: function (el, binding) {
        // 如果没有传入比例值，则默认为1
        let ratio = binding.value || 1;
        let width = el.offsetWidth;
        let finalHeight = width * ratio;
        // 防止高度过低导致影响美观
        if (width < 1000) {
          finalHeight+= 50;
        }
        el.style.height = finalHeight + 'px'
      }
    }
  },
  methods:{
    cursor(){
      clearTimeout(this.timer);
      this.timer=setTimeout(()=>{
        this.nextBanner();
      },this.waitTime);
    },
    nextBanner(){
      let nextBanner = this.bannerIndex+1;
      if(nextBanner>=this.banners.length){
        nextBanner = 0;
      }
      this.changeBanner(nextBanner);
    },
    changeBanner(i){
      this.bannerIndex = i;
      this.cursor();
    }
  }
}
</script>

<style scoped>
.banner {
  width: 100%;
  position: relative;
  display: flex;
  overflow: hidden;
  height: 615px;
}

.banner .banner-show {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 25px;
  display: flex;
  justify-content: center;
}

.banner .banner-show .view-text {
  height: 80%;
  width: 480px;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.47);
  color: floralwhite;
  padding: 2px 5px;
}

.banner .banner-show .view-text .title {
  font-size: 1.7em;
}

.banner .banner-show .view-text .content {
  font-size: 0.9em;
}


.banner .banner-show img {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.banner .banner-show .blurImg{
  top: -110px;
}

.banner .banner-control {
  width: auto;
  height: auto;
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translate(-50%, 0);
  z-index: 10;
  display: flex;
  padding: 5px;
  border-radius: 3px;
  background-color: #fff;
  opacity: 0.8;
}

.banner .banner-control .banner-handle_cjs {
  width: 10px;
  height: 5px;
  border-radius: 2px;
  transition: all 0.6s;
  margin: 0 5px;
  cursor: pointer;
  background-color: rgba(178, 160, 160, 0.79);
}

.banner .banner-control .banner-handlehover {
  background-color: rgba(196, 167, 167, 0.79);
}

.banner .banner-control .banner-handle_cjs-now {
  width: 15px;
  background-color: #f49b00;
}

</style>