[JavaScript知识库]vue走马灯点击左右可切换

html

  <div class="aa" style="display: flex">
        <!-- <button @click="left">左按钮</button> -->
        <el-button type="primary" @click="left" :disabled="flagLeft"
          >左按钮</el-button
        >
        <div style="display: flex; width: 320px; overflow: hidden">
          <img
            v-for="(item, index) in img"
            :key="index"
            :src="item.img"
            style="display: block; width: 80px; height: 80px"
          />
        </div>
        <el-button type="primary" @click="right" :disabled="flagRight"
          >右按钮</el-button
        >
        <!-- <button @click="right">右按钮</button> -->
      </div>

js - 图片放到assets - images中

 //图片数组
      imgArr: [
        {
          id: 1,
          img: require("@/assets/images/1.jpg"),
        },
        {
          id: 2,
          img: require("@/assets/images/2.jpg"),
        },
        {
          id: 3,
          img: require("@/assets/images/3.jpg"),
        },
        {
          id: 4,
          img: require("@/assets/images/4.jpg"),
        },
        {
          id: 5,
          img: require("@/assets/images/5.jpg"),
        },
        {
          id: 6,
          img: require("@/assets/images/6.jpg"),
        },
        {
          id: 7,
          img: require("@/assets/images/7.jpg"),
        },
        {
          id: 8,
          img: require("@/assets/images/8.jpg"),
        },
      ],
      img: [
        {
          id: 1,
          img: require("@/assets/images/1.jpg"),
        },
        {
          id: 2,
          img: require("@/assets/images/2.jpg"),
        },
        {
          id: 3,
          img: require("@/assets/images/3.jpg"),
        },
        {
          id: 4,
          img: require("@/assets/images/4.jpg"),
        },
      ],
      numIndex: 3,
      flagLeft: true,
      flagRight: false,
        left() {
      this.flagRight = false;
      console.log("点击了左箭头");
      if (this.numIndex > 3) {
        this.img.unshift(this.imgArr[this.numIndex - 4]); //前面添加一个
        this.img.pop(this.img[this.numIndex]); //后面删除一个，此处的index因为前面添加了一个新数据的缘故，注意看是否为数组的最后一个数据
        console.log("打印最前面删除的内容", this.imgArr[this.numIndex + 1]);
        this.numIndex--;
        console.log("循环的数组：", this.img);
        console.log("打印下标", this.numIndex);
        if (this.numIndex == 3) {
          this.$message({
            showClose: true,
            message: "前面没有更多了",
          });
          this.flagLeft = true;
        }
      }
    },
    right() {
      this.flagLeft = false;
      console.log("点击了右箭头", this.flagleft);
      this.img.shift(this.img[this.numIndex - 3]); //前面删除一个
      this.img.push(this.imgArr[this.numIndex + 1]); //后面添加一个
      console.log("打印最后新加的内容", this.imgArr[this.numIndex + 1]);
      this.numIndex++;
      console.log("循环的数组：", this.img);
      console.log("打印下标", this.numIndex);
      if (this.numIndex == this.imgArr.length - 1) {
        this.$message({
          showClose: true,
          message: "后面没有更多了",
        });
        this.flagRight = true;
      }
    },

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖