码迷,mamicode.com
首页 > Web开发 > 详细

[Jquery]某宝图片轮播(无缝)

时间:2015-07-30 18:31:52      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:

【思路】

1.结构与样式

①最外层div盒子当容器,里面ul宽度无限大并且相对定位(到时候移动其实移的是ul的left)

②按钮的透明度可用background:rgba()来搞定

③最后一张图片后面紧接第一张,第一张前面紧接最后一张,也就是5123451(不这样做两张图片没有办法贴在一起),这是无缝的关键

2.js

①每次点击按钮,移动的ul距离就是,当前图片的索引*图片宽度

②当移到第“6”张图片时(即5后面的1),应该立刻把他拉回1的位置,但要注意这个判断瞬间拉回的语句,应该写在animate的function里,保证动画执行完后无瑕疵的拉回,而不是跟animate并行,那样会往左移到第一张,而不是无缝右滚动到第一张,反方向亦然。

③点击过快会有bug,一直快速点图片移空了

原因:整个运动还没结束前,就进行下一次点击了

解决方法:两次点击之间,做一个间隔(即两次点击的时间间隔大于一个值时,才执行动画)

 

[Jquery]某宝图片轮播(无缝)

标签:

原文地址:http://www.cnblogs.com/zhangwenkan/p/4689713.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!