用Vue.js实现点击左右按钮图片切换代码演示

3403771864 发布于2022-10-26 22:15 / 802人阅读

　　本篇文章就是讲述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 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>

本篇文章已讲述完毕，欢迎大家关注更多后续内容。

云服务器 GPU云服务器 js菜单左右切换代码 js实现按钮点击 asp图片左右代码 php点击图片切换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128212.html

task0002（四）- 练习：数据处理、轮播及交互

摘要：获取下一个元素节点，存在的话，取消现有选中状态，设置下一个元素节点为选择中，调用运动框架实现动画，添加定时器，调用该函数，实现自动播放。移出时，开启定时器，继续轮播。轮播间隔时间单位为毫秒，默认为，在内部，以下部分进行修改或添加。转载自我的个人博客欢迎大家批评指正包括5部分：小练习1-处理用户输入小练习2-日期对象的使用小练习3：轮播图小练习4：输入提示框小练习...

cnTomato 2019-08-22 10:59 评论0 收藏0
task0002（四）- 练习：数据处理、轮播及交互

摘要：获取下一个元素节点，存在的话，取消现有选中状态，设置下一个元素节点为选择中，调用运动框架实现动画，添加定时器，调用该函数，实现自动播放。移出时，开启定时器，继续轮播。轮播间隔时间单位为毫秒，默认为，在内部，以下部分进行修改或添加。转载自我的个人博客欢迎大家批评指正包括5部分：小练习1-处理用户输入小练习2-日期对象的使用小练习3：轮播图小练习4：输入提示框小练习...

赵春朋 2019-08-01 15:00 评论0 收藏0
vue.js 移动端音乐app（一）基础组件 scroll

一、基础实现（1）功能对 better-scroll 插件的基本封装，实现移动端的滚动（2）实现引入 better-scroll props probeType: better-scroll 配置项之一（1）取值： 1 滚动的时候会派发 scroll 事件，会截流。 2 滚动的时候实时派发 scroll 事件，不会截流。 3 除了实时派发 scroll 事件，在 swipe 的情况...

wqj97 2019-08-21 17:38 评论0 收藏0
vue.js 移动端音乐app（一）基础组件 scroll

一、基础实现（1）功能对 better-scroll 插件的基本封装，实现移动端的滚动（2）实现引入 better-scroll props probeType: better-scroll 配置项之一（1）取值： 1 滚动的时候会派发 scroll 事件，会截流。 2 滚动的时候实时派发 scroll 事件，不会截流。 3 除了实时派发 scroll 事件，在 swipe 的情况...

FingerLiu 2019-08-01 18:01 评论0 收藏0
vue.js 移动端音乐app（一）基础组件 scroll

一、基础实现（1）功能对 better-scroll 插件的基本封装，实现移动端的滚动（2）实现引入 better-scroll props probeType: better-scroll 配置项之一（1）取值： 1 滚动的时候会派发 scroll 事件，会截流。 2 滚动的时候实时派发 scroll 事件，不会截流。 3 除了实时派发 scroll 事件，在 swipe 的情况...

MadPecker 2019-08-29 13:49 评论0 收藏0