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

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

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

思路：

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

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

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

第二步、让图片动起来

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

第三步、让它自动切换

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

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

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

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

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

index()方法;查找索引值

addClass()方法;添加样式

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

fadeIn()方法;淡入

fadeOut()方法;淡出

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

本地下载

写在最后：觉得不管做什么事情,思路非常重要，如果没有思路就不知道如何下手。就像开发一个网站一样，如果你不知道它的开发流程是什么？那么你肯定很迷茫，网站如何去做？第一步该怎么下手。这样你就会认为做一个网站很难。同样的道理：学习jquery首先我认为得明白每个方法是什么含义，只有先明白了这些方法的含义，以及怎么去使用。在项目实战的时候你才不会迷茫。（个人经验，不喜勿喷！）