Vue.js实现点击左右按钮图片切换
本文实例为大家分享了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>
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;
// 点击次数-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>
