用Vue.js实现点击左右按钮图片切换代码演示

Vue.js实现点击左右按钮图片切换

本篇文章介绍如何使用Vue.js实现点击左右按钮实现图片切换，从多种角度实现展示给大家。

效果代码

通过v-for循环展示图片列表itemlist，将图片路径保存在data中的itemlist中，添加上下按钮的点击事件。

<template>
  <div>
    <div class="zs-adv">
      <a title="上一页" :href="'#'" class="adv-pre" @click="leftScroll">上一个</a>
      <div id="adv-pad-scroll">
        <div class="adv-pad">
          <img class="adv-pad-item" v-for="(item, index) in itemlist" :key="index" alt="" :ref="`item${index}`" :src="item.src" />
        </div>
      </div>
      <a title="下一页" :href="'#'" class="adv-next" @click="rightScroll">下一个</a>
    </div>
  </div>
</template>

通过点击事件去执行响应过程。

<script>
export default {
  name: "index",
  components: {},
  data() {
    return {
      maxClickNum: 0, // 最大点击次数
      lastLeft: 0, // 上次滑动距离
      clickNum: 0, // 点击次数
      itemlist: [
        {
          id: 0,
          src: require("./image/1.png"),
        },
        {
          id: 1,
          src: require("./image/2.png"),
        },
        {
          id: 2,
          src: require("./image/3.png"),
        },
        {
          id: 3,
          src: require("./image/4.png"),
        },
        {
          id: 4,
          src: require("./image/5.png"),
        },
        {
          id: 5,
          src: require("./image/6.png"),
        },
      ],
    };
  },
  methods: {
    leftScroll() {
      if (this.clickNum > 0) {
        // 获取当前元素宽度
        let width =
          document.querySelectorAll(".adv-pad-item")[this.clickNum - 1]
            .offsetWidth;
        // 滚动距离（元素的magin-left值）=它自己的长度 + 上一次滑动的距离 
        document.getElementsByClassName("adv-pad")[0].style.marginLeft = `${
          this.lastLeft + width
        }px`;
        this.lastLeft = width + this.lastLeft;
        // 点击次数-1
        this.clickNum = this.clickNum - 1;
        // 如果点击次数小于最大点击次数，说明最后一个元素已经不在可是区域内了，显示右箭头
        if (this.clickNum < this.maxClickNum) {
          this.showRightIcon = true;
        }
      }
    },
    rightScroll() {
      // 如果点击次数小于数组长度-1时，执行左滑动效果。
      if (this.clickNum  lookWidth) {
          // 滚动距离（元素的magin-left值）=负的它自己的长度 + 上一次滑动的距离 
          document.getElementsByClassName("adv-pad")[0].style.marginLeft = `${
            -width + this.lastLeft
          }px`;
          this.lastLeft = -width + this.lastLeft;
          // 点击次数+1
          this.clickNum += 1;
          // 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示
          this.maxClickNum = this.clickNum;
        }
        this.showRightIcon = lastItemOffsetLeft > lookWidth + width;
      }
    },
  },
};
</script>

修改css样式。

<style scoped>
.zs-adv {
  margin: 50px auto 0;
  width: 1272px;
  height: 120px;
  background: url("./image/adv-bg.png") top center no-repeat;
  a {
    margin-top: 58px;
    width: 16px;
    height: 24px;
    opacity: 0.8;
  }
  a:hover {
    opacity: 1;
  }
  .adv-pre {
    float: left;
    margin-right: 20px;
  }
  .adv-next {
    float: right;
  }
  #adv-pad-scroll {
    float: left;
    width: 1200px;
    overflow: hidden;
  }
  .adv-pad {
    width: 2400px;
    height: 120px;
  }
  .adv-pad-item {
    padding: 20px 10px 0px 10px;
    width: 400px;
    height: 100px;
    cursor: pointer;
    animation: all 1.5s;
  }
  .adv-pad-item:hover {
    padding: 10px 5px 0px 10px;
  }
}
</style>

本篇文章已讲述完毕，欢迎大家关注更多后续内容。