位置: 编程技术 - 正文
推荐整理分享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,调用切换函数。
标签: jqgrid设置宽度
本文链接地址:https://www.jiuchutong.com/biancheng/373832.html 转载请保留说明!友情链接: 武汉网站建设