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"><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>

Vue.js实现点击左右按钮图片切换相关推荐

JS实现点击button按钮切换图片
JS实现点击button按钮切换图片放暑假在家打算学习html/css/js制作网页,只有html/css的一些基础.实现效果如图: 这个网页很简单,是用Dreamweaver写的,但是是通过自己做 ...
Vue js 实现点击页面空白处隐藏指定div
Vue js 实现点击页面空白处隐藏指定div <template><div class="page" @ ...
鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果
今天来分享一下[鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码]. 最后的效果如下: Html代码部分: <!doctype html>&l ...
html图片点击左右滑动效果,基于jquery实现点击左右按钮图片横向滚动
点击左右按钮图片横向滚动jquery,一次滚动四个,图片滚动完成,自动回到第一个版面: 效果图如下: 点击左右按钮图片横向滚动 * { margin:0; padding:0;} body { fon ...
android 按钮图片切换动画效果,Button按钮点击图片切换效果
Button按钮图片切换效果设置. 通常在工程中用到图片按钮点击事件,大多都用ImageButton.在这里我们用 Button的点击事件,在图片的切换过程中不再通过setBackgroundReso ...
html5滚动文字切换效果代码,js+div实现文字滚动和图片切换效果代码
本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了 ...
vue中，点击button按钮后，页面上的input框再次自动获取焦点
需求:点击button按钮,录入成功后,页面上的input框自动聚焦,快速进行下一次录入,提高效率开始尝试了几种方法都没有成功一.首先想到的用vue指令 v-focus,然而没有成功 <In ...
【vue.js】+云存储（实现图片上传功能）
利用vue.js+element-ui实现云存储上传图片功能文章目录前言一.对象存储二.配置腾讯云Cos 1.引入库第一步拥有腾讯云的开发者账号实名认证三.新建文件上传组件新建上传图片 ...
Vue.js如何实现对一千张图片进行分页加载？
目录 vue处理一千张图片进行分页加载分页加载.懒加载---概念介绍: 思路: 开发过程中,如果后端一次性返回你1000多条图片或数据,那我们前端应该怎么用什么思路去更好的渲染呢? 第一种:我们可以 ...

Vue.js实现点击左右按钮图片切换

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

效果：

html

js

css

Vue.js实现点击左右按钮图片切换相关推荐

最新文章

热门文章