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

本文实例为大家分享了Vue.js实现点击左右按钮图片切换的具体代码，供大家参考，具体内容如下
关于图片切换，网上也有很多的说法，这边通过参考给出了如下所示的解决方案
效果：

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

1. <template>
2. <div>
3.   <div class="zs-adv">
4.    <a title="上一页" :href="'#'" class="adv-pre" @click="leftScroll">上一个</a>
5.    <div id="adv-pad-scroll">
6.     <div class="adv-pad">
7.      <img
8.        class="adv-pad-item"
9.        v-for="(item, index) in itemlist"
10.        :key="index"
11.        alt=""
12.        :ref="`item${index}`"
13.        :src="item.src"
14.      />
15.     </div>
16.    </div>
17.    <a title="下一页" :href="'#'"  class="adv-next" @click="rightScroll">下一个</a>
18.   </div>
19. </div>
20. </template>

复制代码

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

1. <script>
2. xport default {
3.   name: "index",
4.   components: {},
5.   data() {
6.    return {
7.     maxClickNum: 0, // 最大点击次数
8.     lastLeft: 0, // 上次滑动距离
9.     clickNum: 0, // 点击次数
10.     itemlist: [
11.      {
12.       id: 0,
13.       src: require("./image/1.png"),
14.      },
15.      {
16.       id: 1,
17.       src: require("./image/2.png"),
18.      },
19.      {
20.       id: 2,
21.       src: require("./image/3.png"),
22.      },
23.      {
24.       id: 3,
25.       src: require("./image/4.png"),
26.      },
27.      {
28.       id: 4,
29.       src: require("./image/5.png"),
30.      },
31.      {
32.       id: 5,
33.       src: require("./image/6.png"),
34.      },
35.     ],
36.     // imgx: 0,
37.     // form: this.$form.createForm(this, { name: "horizontal_login" }),
38.    };
39.   },
40.   //函数
41.   methods: {
42.    leftScroll() {
43.     if (this.clickNum > 0) {
44.      // 获取当前元素宽度
45.      console.log(document.querySelectorAll(".adv-pad-item"));
46.      let width =
47.       document.querySelectorAll(".adv-pad-item")[this.clickNum - 1]
48.        .offsetWidth;
49.      // 公示：滚动距离（元素的magin-left值） = 它自己的长度 + 上一次滑动的距离
50.      console.log(document.getElementsByClassName("adv-pad"));
51.      document.getElementsByClassName("adv-pad")[0].style.marginLeft = `${
52.       this.lastLeft + width
53.      }px`;
54.      this.lastLeft = width + this.lastLeft;
55.      // 点击次数-3
56.      this.clickNum = this.clickNum - 1;
57.      // 如果点击次数小于最大点击次数，说明最后一个元素已经不在可是区域内了，显示右箭头
58.      if (this.clickNum < this.maxClickNum) {
59.       this.showRightIcon = true;
60.      }
61.     }
62.    },
63.    rightScroll() {
64.     // 如果点击次数小于数组长度-1时，执行左滑动效果。
65.     if (this.clickNum < this.itemlist.length - 1) {
66.      // 获取当前元素宽度
67.      let width =
68.       document.querySelectorAll(".adv-pad-item")[this.clickNum].offsetWidth;
69.      // 获取最后一个元素距离左侧的距离
70.      let lastItemOffsetLeft =
71.       document.getElementsByClassName("adv-pad-item")[
72.       this.itemlist.length - 1
73.        ].offsetLeft;
74.      // 获取可视区域宽度
75.      const lookWidth = document.getElementById("adv-pad-scroll").clientWidth;
76.      // 如果最后一个元素距离左侧的距离大于可视区域的宽度，表示最后一个元素没有出现，执行滚动效果
77.      if (lastItemOffsetLeft > lookWidth) {
78.       // 公示：滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离
79.       document.getElementsByClassName("adv-pad")[0].style.marginLeft = `${
80.        -width + this.lastLeft
81.       }px`;
82.       this.lastLeft = -width + this.lastLeft;
83.       // 点击次数+3
84.       this.clickNum += 1;
85.       // 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示
86.       this.maxClickNum = this.clickNum;
87.      }
88.      this.showRightIcon = lastItemOffsetLeft > lookWidth + width;
89.     }
90.    },
91.   },
92. };
93. </script>

复制代码

css

1. <style lang="less" scoped>
2. .zs-adv {
3.   margin: 50px auto 0;
4.   width: 1272px;
5.   height: 120px;
6.   background: url("./image/adv-bg.png") top center no-repeat;
8.   a {
9.    margin-top: 58px;
10.    width: 16px;
11.    height: 24px;
12.    opacity: 0.8;
13.   }
15.   a:hover {
16.    opacity: 1;
17.   }
19.   .adv-pre {
20.    float: left;
21.    margin-right: 20px;
22.   }
24.   .adv-next {
25.    float: right;
26.   }
28.   #adv-pad-scroll {
29.    float: left;
30.    width: 1200px;
31.    overflow: hidden;
32.    .adv-pad {
33.     width: 2400px;
34.     height: 120px;
35.     .adv-pad-item {
36.      padding: 20px 10px 0px 10px;
37.      width: 400px;
38.      height: 100px;
39.      cursor: pointer;
40.      animation: all 1.5s;
41.     }
43.     .adv-pad-item:hover {
44.      padding: 10px 5px 0px 10px;
45.     }
46.    }
47.   }
48. }
49. </style>

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。