关于图片切换，网上也有很多的说法，这边通过参考给出了如下所示的解决方案
效果：
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"><imgclass="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>
js
通过点击事件去执行响应过程
<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;// 点击次数-3this.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;// 点击次数+3this.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>
