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

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

微信扫一扫 微信打赏

支付宝扫一扫 支付宝打赏

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
  • 城南
    2016-05-29 16:03:44发表

    对对对,要动态的~~嘿嘿

  • 段亮自媒体博客
    2016-05-14 16:00:23发表

    哈哈,当时没考虑到这么多而已 ,但如果要写的更通用一点的话,就是子涵同学所说的。一般来说我们不会去特定写死多少张图片,而是采用比较灵活的方式去解决的。

  • 子涵
    2016-05-13 20:59:34发表

    肯定先学原声的JavaScript了撒,jquery就是封装的jS方法!

  • 子涵
    2016-05-13 20:58:54发表

    _index都等于3了,那只有在等于3的时候才执行了哟?其实我觉得你这个方法也不是很好的!应该这样:if(_index (imglist.length-1)){_index = 0;}。这样不管有多少张图片都可以进行轮播了,length获取的是IMG标签的个

  • 城南
    2016-05-12 00:16:03发表

    哥们,我觉得那个定时器方法有个计时器可以优化下。if (_index ==3) {_index = -1;}这样就可以保证,_index 绝对不会超过3了。

  • 宅男福利社
    2015-10-30 05:21:20发表

    [bofu变脸]

  • 我舌头很卷
    2015-10-20 18:26:03发表

    [拜拜]

  • 通往成功的路 总在施工中
    2015-07-03 22:16:14发表

    jquery 特效大全

  • 上帝之手
    2014-11-01 22:18:05发表

    那个meteor怎么搭建 好像也很流行啊

  • 上帝之手
    2014-11-01 22:16:54发表

    真的 那我是先学js 还是jquery尼

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

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