为了账号安全,请及时绑定邮箱和手机立即绑定

vue实现自动轮播的问题

vue实现自动轮播的问题

牧羊人nacy 2019-03-14 18:15:30
如下图,我想做成一个自动轮播的笑过,但是不会做,想请教大神一下。如图1,从右向左自动轮播,当鼠标放到上面的时候就停止轮播,鼠标离开的时候开始轮播,这个应该怎么做?能提供以下详细的代码吗?多谢
查看完整描述

1 回答

?
DIEA

TA贡献1820条经验 获得超2个赞

轮播的原理其实就是移动你dom的位置,然后让可见的不可见,不可见的可见,其中你可以选用改变你这个列表的left或者用transform: translateX 来实现
1.纯css: 写animation动画呗,不断改变translateX 然后hover的时候设置animation-play-state pause暂停。思路是这样可能但是可能不是很好操控细节

2.用js 写一个setTimeout或者raf之类不断改变translateX,然后绑定onmouseenter onmouseleave事件,设置一个flag,或者直接在两个时间里面移除定时和开启定时。

思路大概就是这样吧,具体细节肯定还是有需要打磨的,可以看一下网上很多轮播图的源码参考一下


查看完整回答
反对 回复 2019-03-29
  • 1 回答
  • 0 关注
  • 376 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信