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>

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

查看更多关于Vue.js实现点击左右按钮图片切换的详细内容...