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

2016-10-17 1172 0 编辑:深色多郎 来源:网站程序书籍

最近在学习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()方法;停止定时任务

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联