JQuery制作banner全屏特效切换原理

最近在学习jquery，发现jquery上手比javascript容易许多，因为有着良好的文档和帮助手册，如果遇到一些问题可以借助文档来解决。初步接触学习jquery，我发现学习jquery主要是学会如何使用内置的方法。

今天深色多郎就跟大家一起分享下，用jquery写的一个banner全屏特效切换的案例，以及制作它运用了哪些jquery内置方法。

banner全屏切换

思路：

注：这里说的是JS中的思路，至于布局的话，可以下载源码自己研究。

第一步、让切换按钮动起来

上图中有4个小切换按钮，当鼠标每滑动到一个切换按钮的位置，则相对应的添加一个样式。（一个橘黄色的小圆点）

第二步、让图片动起来

当滑动每个相对应切换按钮时，我们的背景图片也需要随着切换。

第三步、让它自动切换

当鼠标没有滑动到切换按钮时，则让它自动切换，这里需定义一个定时任务。（setInterval）

jquery代码

根据上图jquery代码中，下面总结了此次特效所用到的方法：

eq()方法;寻找当前索引

mouseover()方法；当鼠标滑动到元素上方，则发生该事件

mouseout()方法;当鼠标离开时，则发生该事件

index()方法;查找索引值

addClass()方法;添加样式

sibling()方法;获取当前元素的同辈其他元素

fadeIn()方法;淡入

fadeOut()方法;淡出

以及javascript中的setInterval()方法;定义一个定时任务。和clearInterval()方法;停止定时任务