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

移动端无缝轮播图,不添加额外

移动端无缝轮播图,不添加额外

HUWWW 2018-09-06 13:15:55
淘宝移动端m.taobao.com主页中无缝轮播图我看了下chrome开发者工具,淘宝的做法好像是不断地将第一个图片放到最后一个ul 相对定位,li绝对定位,假设有3个li每个li里的图片是500px。则设置li left:0px 100px 200pxul translateX 0px -100px -200px当ul移动到最后一个图片时,设置第一个li left:300px(即把第一个li移动到最后)然后随着 ul translateX -300px 将原本的第二个图片现在的第一个图片 left:400px然后在ul tranlateX -400px请问淘宝的无缝轮播图的思路是这样的吗???请问代码实现具体的思路是什么?在移动端 用原生js写和Hammer.js手势库。另外手指在淘宝轮播图往左慢慢滑动的时候,图片也会慢慢地往左移动,是用hammer.js的什么手势??pan?还是swipe?
查看完整描述

1 回答

?
holdtom

TA贡献1805条经验 获得超10个赞

直接用swiper插件啊,既没有错误,又简单。


查看完整回答
反对 回复 2018-10-08
  • 1 回答
  • 0 关注
  • 670 浏览
慕课专栏
更多

添加回答

举报

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