加入收藏 | 设为首页 |

安博电竞竞猜网站-VUE.js左右切换图片特效,十分有用

海外新闻 时间: 浏览:128 次

今日给咱们共享一个关于小米官网的一个特效,信任有许多小伙伴有更好的完成办法,这边只做一个沟通和评论哦,喜爱的话就加个重视哦!

【作用图】点击右上角的左右切换按钮可进行切换。安博电竞竞猜网站-VUE.js左右切换图片特效,十分有用

完成思路

完成的思路主要是经过安博电竞竞猜网站-VUE.js左右切换图片特效,十分有用js改动ulmargin-left的值,到达切换作用。ul中有10个li,咱们能够将其分安博电竞竞猜网站-VUE.js左右切换图片特效,十分有用为2组,一组为5个li,宽度刚好是122安博电竞竞猜网站-VUE.js左右切换图片特效,十分有用4px。默许展现前5个li,这个时安博电竞竞猜网站-VUE.js左右切换图片特效,十分有用分的ul的ma空穴来风rgin-left:0px,当咱们触发切换事情时。就将margin-left进行0或-1224px来回改换,一起加上动画transition,这样就完成了该作用。

HTML代码

VUE脚手架中的HTML代码

VUE办法

当触发函是经过自增和自减 1,来改动 currPage 的值。这个思路仍是比较值得参阅的。喜爱的话就加个重视哦。