龙空技术网

VUE.js左右切换图片特效,非常实用

前端小蚂哥 382

前言:

当前各位老铁们对“js怎么实现图片切换”大约比较关注,大家都需要知道一些“js怎么实现图片切换”的相关资讯。那么小编同时在网络上搜集了一些有关“js怎么实现图片切换””的相关内容,希望姐妹们能喜欢,姐妹们一起来了解一下吧!

今天给大家分享一个关于小米官网的一个特效,相信有很多小伙伴有更好的实现方法,这边只做一个交流和讨论哦,喜欢的话就加个关注哦!

【效果图】点击右上角的左右切换按钮可进行切换。

实现思路

实现的思路主要是通过js改变ul的margin-left的值,达到切换效果。ul中有10个li,我们可以将其分为2组,一组为5个li,宽度刚好是1224px。默认展示前5个li,这个时候的ul的margin-left:0px,当我们触发切换事件时。就将margin-left进行0或-1224px来回变换,同时加上动画transition,这样就实现了该效果。

HTML代码

VUE脚手架中的HTML代码

VUE方法

当触发函是通过自增和自减 1,来改变 currPage 的值。这个思路还是比较值得参考的。喜欢的话就加个关注哦。

标签: #js怎么实现图片切换 #js的图片切换 #js怎么实现点击按钮图片切换窗口 #js背景图片切换 #用js实现背景图片的自动切换