位置: 编程技术 - 正文
jQuery实现宽屏图片轮播实例教程(jqgrid设置宽度)
编辑：rootadmin推荐整理分享jQuery实现宽屏图片轮播实例教程(jqgrid设置宽度)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery宽度,jqgrid设置宽度,jquery设置div宽度,jquery宽度动态0到400变化,jquery设置div宽度,jquery设置div宽度,jquery宽度,jquery实现图片放大,内容如对您有帮助，希望把文章链接给更多的朋友！
本文实例讲述了jQuery实现宽屏图片轮播实例教程。分享给大家供大家参考。具体如下：运行效果截图如下：
引入jquery库
构建html整个代码分为三部分：
1、加载部分loadding ；
2、图片部分，这里图片只能是4张，有心的朋友再改良下吧；
3、TAB按钮部分，当然这里也只能是4个按钮，也需要改进。
CSS样式这里的CSS可以根据项目需求自定义，不必拘泥于下面的代码，只要弄懂其中的原理就OK了。若你看不懂下面的CSS的话就恶补下吧，在此就不一一讲解了。
JS代码终于来到重点部分了，这部分的代码不多，一起来看下吧。
不知亲们看完以上的注释，知道原理了没有呢？其实整个代码分为四个部分：1、图片切换 以i作为计数器，显示当前为i的图片，其它图片全部隐藏，给当前为i的按钮加上ggOn样式，其它按钮去除ggOn样式，而每次调用切换函数时i自增1。2、自动播放定义一个定时器loop，每5秒调用一次切换函数。3、鼠标hover事件原来就是鼠标悬浮时清除loop定时器，鼠标离开时载入loop定时器。4、按钮事件绑定tab按钮单击事件，单击后给i赋上当前tab按钮的index值-1,调用切换函数。
上一篇：jquery利用拖拽方式在图片上添加热链接(jquery拖拽功能)
下一篇：Jquery-1.9.1源码分析系列（十一）之DOM操作(jquery源码分析笔记)