基于vue如何制作图片点击切换的效果-群英

上一篇：用JS如何实现手动切换和自动轮播图的效果下一篇：Javascript作用域怎样声明，闭包的应用是怎样

这篇文章将为大家详细讲解有关“基于vue如何制作图片点击切换的效果”的知识，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

本文实例为大家分享了Vue.js实现点击左右按钮图片切换的具体代码，供大家参考，具体内容如下

关于图片切换，网上也有很多的说法，这边通过参考给出了如下所示的解决方案

效果：

html

通过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"),
          },
        ],
        // imgx: 0,
        // form: this.$form.createForm(this, { name: "horizontal_login" }),
      };
    },
    //函数
    methods: {
      leftScroll() {
        if (this.clickNum > 0) {
          // 获取当前元素宽度
          console.log(document.querySelectorAll(".adv-pad-item"));
          let width =
            document.querySelectorAll(".adv-pad-item")[this.clickNum - 1]
              .offsetWidth;
          // 公示：滚动距离（元素的magin-left值） = 它自己的长度 + 上一次滑动的距离
          console.log(document.getElementsByClassName("adv-pad"));
          document.getElementsByClassName("adv-pad")[0].style.marginLeft = `${
            this.lastLeft + width
          }px`;
          this.lastLeft = width + this.lastLeft;
          // 点击次数-3
          this.clickNum = this.clickNum - 1;
          // 如果点击次数小于最大点击次数，说明最后一个元素已经不在可是区域内了，显示右箭头
          if (this.clickNum < this.maxClickNum) {
            this.showRightIcon = true;
          }
        }
      },
      rightScroll() {
        // 如果点击次数小于数组长度-1时，执行左滑动效果。
        if (this.clickNum < this.itemlist.length - 1) {
          // 获取当前元素宽度
          let width =
            document.querySelectorAll(".adv-pad-item")[this.clickNum].offsetWidth;
          // 获取最后一个元素距离左侧的距离
          let lastItemOffsetLeft =
            document.getElementsByClassName("adv-pad-item")[
            this.itemlist.length - 1
              ].offsetLeft;
          // 获取可视区域宽度
          const lookWidth = document.getElementById("adv-pad-scroll").clientWidth;
          // 如果最后一个元素距离左侧的距离大于可视区域的宽度，表示最后一个元素没有出现，执行滚动效果
          if (lastItemOffsetLeft > lookWidth) {
            // 公示：滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离
            document.getElementsByClassName("adv-pad")[0].style.marginLeft = `${
              -width + this.lastLeft
            }px`;
            this.lastLeft = -width + this.lastLeft;
            // 点击次数+3
            this.clickNum += 1;
            // 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示
            this.maxClickNum = this.clickNum;
          }
          this.showRightIcon = lastItemOffsetLeft > lookWidth + width;
        }
      },
    },
  };
</script>

css

<style lang="less" 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>

关于“基于vue如何制作图片点击切换的效果”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。