JS插件:jQuery版轮播图

一、代码分两个部分:1、HTML部分,根据注释处理即可;2、基于jQuery的play.js插件部分,这里为了展示效果,直接写在下的标签里。3、效果包含:自动轮播,焦点对齐,前进后退,直走不返,鼠标进入、轮播停止且前进后退图标出现,鼠标离开、轮播重启且前进后退图标隐藏。4、这里可以预览效果。

二、轮播图原理说明:

(1)轮播图(假设)有7张图片,“一”字排列,把第1张图片复制一次,放到第8张的位置,这样共有8张图片;轮播开始后,

(2)整个第2秒内,第2张图片从开始出现到完全出现,耗时700毫秒,完全出现后再停留300毫秒;

(3)整个第3秒内,第3张图片从开始出现到完全出现,耗时700毫秒,完全出现后再停留300毫秒;以此类推

(4)整个第8秒内,第8张图片从开始出现到完全出现,耗时700毫秒,完全出现后再停留300毫秒;注意

(5)整个第9秒内,轮播图急速回到第1张图片完全出现的状态,耗时约0毫秒(即运行autoMove方法中if语句块的耗时),然后立即开始(2)步骤。

三、也可以用命名空间的方式进行扩展:

```html:run

   

   

   

   

       

       

       

       

       

       

       

       

       

       

       

       

       

       

   

```

你可能感兴趣的:(JS插件:jQuery版轮播图)