我写的jquery简单轮播效果,为何总是在动画和自动上出问题

总共有两个问题:

1.快速单击prev或者next按钮产生的动画积累问题。很多人对stop函数还是不太明白,因为我也看了别人写的轮播,stop传入的参数true,false都不一样。

2.timer会不会和单击某个number时产生重叠?

这两个问题一直困扰着我,求大神给个简单的轮播思路。这个轮播必须有如下要求:

  • 向前或者向后
  • 数字显示当前是第几个图片
  • 支持自动轮播

没了,我总是怀疑我的思路有问题。

献上我的代码吧,请求指出问题:

http://jsfiddle.net/LWPF8/

阅读 4.2k
1 个回答

https://dl.dropboxusercontent.com/u/17958375/work/slide.html

这是我写的一个简单版,如果不需要过渡效果的话这个还是可以的。(在Chrome上测试通过,但是不知道为什么,放在jsfiddle上无法工作)

下面说说我的想法

轮播原理

就是把所有的li按照块摆成一行,可见需要的块,其余的块都不可见。
(这里css属性display:inline-block;float:left;比较关键)

轮播页数显示

为每个li块设置一个data属性来存储自己的排号,显示的时候通过读取data属性来显示排号。

自动轮播

自动轮播这里比较重要的是当用户自己点击的时候需要清除一次时间,否则很容易造成题主所谓的叠加效果,因为程序并不知道已经到了下一张了仍然会继续进行,所以新一页到下一页的时间会比设置的时间要短非常多)。

推荐问题
宣传栏