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

  • 编辑时间: 2014-10-29
  • 浏览量: loading
  • 作者: 段亮

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

    点击预览  本地下载

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

本文出处:http://www.duanliang920.com/learn/web/tx/292.html

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对段亮这小子的支持! ~(@^_^@)~

微信扫一扫 微信打赏

支付宝扫一扫 支付宝打赏

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客