轮播切换

EstherNi

已于 2023-12-13 18:45:50 修改

阅读量398

点赞数 7

文章标签： javascript 前端开发语言

于 2023-12-13 18:24:00 首次发布

本文链接：https://blog.csdn.net/EstherNi/article/details/134979046

版权

在这里插入图片描述

<div class="file-pic">
      <div class="left">
        <img v-if="getFileExtension(currentImage.filePath)!='mp4'" @click="handleImg" id="aabccb" :src="currentImage.fileUrl" alt="Image">
        <video v-else @click="handleVideo" id="aabb" controls style="width:100%;height:100%;background-color: black;" :src="currentImage.fileUrl"></video>
      </div>
      <div class="right">
        <div class="top">
          <i class="el-icon-caret-top" @click="prevImage"></i>
        </div>
        <div class="right-pic">
          <div v-for="(item,indexS) in images" :key="indexS" class="pic-img" :class="indexS==currentIndex?'active':''">
            <img v-if="getFileExtension(item.filePath)!='mp4'" :src="item.fileUrl" />
            <video v-else style="width:100%;height:100%;background-color: black;" :src="item.fileUrl"></video>
          </div>
        </div>
        <div class="bottom">
          <i class="el-icon-caret-bottom" @click="nextImage"></i>
        </div>
      </div>
    </div>

import screenfull from "screenfull";
 data() {
    return {
      images: [
        {
          fileUrl:
            "http://192.168.110.36:9000/air/任务附件测试图片_1702019545459.png",
          filePath: "/air/任务附件测试图片_1702019545459.png",
        },
        {
          filePath: "air/任务测试视频文件_1699251185315.mp4",
          fileUrl:
            "http://192.168.110.36:9000/air/任务测试视频文件_1699251185315.mp4",
        },
       
      ],
      currentIndex: 0,
    };
  },
  created() {
  },
  computed: {
    currentImage() {
      return this.images[this.currentIndex];
    },
  },
  watch: {
    currentIndex(newVal, oldVal) {
      var targetDiv = document.getElementsByClassName("right-pic")[0];
      var height = targetDiv.scrollHeight / this.images.length;
      targetDiv.scrollTop = height * this.currentIndex;
    },
  },
   methods: {
   //点击全屏展示
    handleVideo() {
      let element = document.getElementById("aabccb");
      screenfull.toggle(element);
    },
    handleImg() {},
    prevImage() {
      this.currentIndex =
        (this.currentIndex - 1 + this.images.length) % this.images.length;
    },
    nextImage() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
      console.log("下一页：", this.currentIndex, this.images.length - 1);
    },
    //截取后缀
    getFileExtension(filename) {
      var parts = filename.split(".");
      return parts[parts.length - 1];
    },
  },

.file-pic {
  display: flex;
  align-items: center;
  grid-column-gap: 18px;
  .left {
    width: 550px;
    height: 380px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    width: 192px;
    height: 380px;
    border: 1px solid #e1e6f0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    .top {
      width: 100%;
      height: 19px;
      background: red;
      text-align: center;
      .el-icon-caret-top {
        font-size: 18px;
        color: #c0c4cc;
        cursor: pointer;
      }
      .el-icon-caret-top:hover {
        color: #3885fd;
      }
    }
    .right-pic {
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-items: center;
      overflow: auto;
      flex: 1;
      .pic-img {
        flex-shrink: 0;
        width: 150px;
        height: 100px;
        margin: 5px 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .active {
        border: 2px solid #3885fd;
      }
    }
    .bottom {
      width: 100%;
      height: 19px;
      background: red;
      text-align: center;

      .el-icon-caret-bottom {
        font-size: 18px;
        color: #c0c4cc;
        cursor: pointer;
      }
      .el-icon-caret-bottom:hover {
        color: #3885fd;
      }
    }
  }
}