js怎么实现点击按钮图片切换,vue中实现简单切换图片效果
这篇文章主要为大家详细介绍了vue。j实现点击左右按钮图片切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue。j实现点击左右按钮图片切换的具体代码，供大家参考，具体内容如下
关于图片切换，网上也有很多的说法，这边通过参考给出了如下所示的解决方案
效果：
超文本标记语言
通过迭代循环展示图片列表项目列表，将图片路径保存在数据中的项目列表中，添加上下按钮的点击事件。
模板
差异
div class=zs-adv
a title=上一页：href= # class= adv-pre @ click=向左滚动上一个/a
div id=高级填充滚动
div class=" adv-pad "
图片
高级便笺-项目
项目列表中的v-for=(项目，索引
:key=index
alt=
:ref=`item${index} `
:src=item.src
/
/div
/div
a title=下一页：href= # class= adv-next @ click=向右滚动下一个/a
/div
/div
/模板
射流研究…
通过点击事件去执行响应过程
脚本
导出默认值{
名称："索引",
组件：{},
data() {
返回{
maxClickNum: 0，//最大点击次数
lastLeft: 0，//上次滑动距离
clickNum: 0，//点击次数
项目列表：[
{
id: 0，
src:需要(./image/1.png )，
},
{
id: 1，
src:需要(./image/2.png )，
},
{
id: 2，
src:需要(./image/3.png )，
},
{
id: 3，
src:需要(./image/4.png )，
},
{
id: 4，
src:需要(./image/5.png )，
},
{
id: 5，
src:需要(./image/6.png )，
},
],
//imgx: 0，
//形式：这个. form.createForm(this，{ name: horizontal_login })，
};
},
//函数
方法：{
leftScroll() {
if (this.clickNum 0) {
//获取当前元素宽度
控制台。日志(文档。查询选择器全部(.adv-pad-item ))；
字母宽度=
document.querySelectorAll( .adv-pad-item )【这个。点击数字-1]。偏移距离
//公示：滚动距离（元素的魔法-左侧值)=它自己的长度上一次滑动的距离
控制台。日志(文档。getelementsbyclassname( adv-pad )；
文档。getelementsbyclassname( adv-pad )[0]。风格。左边距=` $ {
this.lastLeft左左侧宽度
} px
这个。最后左边=宽度。最后离开；
//点击次数-3
这个。点击num=this。点击num-1；
//如果点击次数小于最大点击次数，说明最后一个元素已经不在可是区域内了，显示右箭头
如果(这个。单击num this。maxclicknum){
this.showRightIcon=true
}
}
},
右滚动(){
//如果点击次数小于数组长度-1时，执行左滑动效果。
如果(这个。单击num this。项目列表。长度-1){
//获取当前元素宽度
字母宽度=
document.querySelectorAll( .adv-pad-item)[this.clickNum].偏移距离
//获取最后一个元素距离左侧的距离
设lastItemOffsetLeft=
文档。getelementsbyclassname( adv-pad-item )[
this.itemlist.length - 1
].获取
//获取可视区域宽度
常量外观宽度=文档。getelementbyid(高级填充滚动).客户端宽度
//如果最后一个元素距离左侧的距离大于可视区域的宽度，表示最后一个元素没有出现，执行滚动效果
if(lastItemOffsetLeft look width){
//公示：滚动距离（元素的魔法-左侧值)=负的它自己的长度上一次滑动的距离
文档。getelementsbyclassname( adv-pad )[0]。风格。左边距=` $ {
-宽度此。最后左
} px
这个。最后左=-宽度这个。最后离开；
//点击次数3
这个。单击num=1；
//记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示
这个。maxclicknum=this。点击数量；
}
这个。showrighticon=lastItemOffsetLeft外观宽度宽度；
}
},
},
};
/脚本
钢性铸铁
style lang=less 范围。zs-高级
边距：50px自动0;
宽度：1272像素
高度：120像素
背景：url( ./image/adv-bg.png )顶部居中无重复；
一个{
边距-顶部：58px
宽度：16px
高度：24px
不透明度：0.8;
}
答：悬停{
不透明度：1;
}。高级-高级{
浮动：左；
右边距：20px
}。adv-next {
浮动：对；
}
#高级键盘滚动{
浮动：左；
宽度：1200像素
溢出：隐藏；高级垫
宽度：2400像素
高度：120像素。高级便笺项目{
填充：20像素10像素0像素10像素
宽度：400像素
高度：100像素
光标：指针；
动画：全1.5秒
}。高级面板项目：悬停{
填充：10px 5px 0px 10px
}
}
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。