jQuery实现宽屏图片轮播实例教程_jquery

2、图片部分，这里图片只能是4张，有心的朋友再改良下吧；
3、TAB按钮部分，当然这里也只能是4个按钮，也需要改进。




 
 精彩活动载入中
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 5月22日测试开启领报名资格
 首测世界的雕琢篇章开启
 上古世纪游戏资料手册
 游戏四大特色揭晓
 
 
 

CSS样式

这里的CSS可以根据项目需求自定义，不必拘泥于下面的代码，只要弄懂其中的原理就OK了。若你看不懂下面的CSS的话就恶补下吧，在此就不一一讲解了。



.ggLoading, .ggLoading2 {
 background-image: url(../images/nav.png);
}
.gg {
 width: 100%;
 height: 500px;
 position: relative;
 z-index: 1;
 overflow: hidden;
 margin: 0 auto;
 background: #d3d3d3 url(../images/loading.jpg) repeat-x;
}
.ggLoading {
 position: absolute;
 left: 40%;
 top: 200px;
 width: 325px;
 text-align: center;
 height: 56px;
 background-position: 0 -274px;
 background-repeat: no-repeat;
 line-height: 56px;
 color: #9c9c9c;
}
.ggLoading2 {
 width: 330px;
 height: 56px;
 background-position: 213px -330px;
 background-repeat: no-repeat;
}
.ggLoading em {
 font-weight: bold;
}
.ggs {
 width: 200%;
 height: 500px;
 left: -50%;
 top: 0;
 position: absolute;
}
.ggBox {
 width: 1920px;
 height: 500px;
 margin: 0 auto;
}
.ggBox a {
 display: block;
 width: 1920px;
 height: 500px;
 position: absolute;
 z-index: 1;
 opacity: 0.1;
}
.ggBox img {
 display: block;
 width: 1920px;
 height: 500px;
}
.ggb {
 position: absolute;
 width: 100%;
 left: 0;
 bottom: 0;
 height: 40px;
 z-index: 4;
 background-color: #32342e;
 background-repeat: repeat-x;
 background-position: 50% -40px;
}
.ggBtns {
 width: 960px;
 height: 40px;
 margin: 0 auto;
 border-left: 1px solid #090908;
 border-right: 1px solid #6a6a60;
}
.ggBtns a {
 float: left;
 display: block;
 width: 240px;
 height: 40px;
 text-align: center;
 padding-top: 10px;
 color: #848380;
 font-size: 14px;
 line-height: 40px;
 background-position: 0 10px;
 position: relative;
 top: -10px;
 outline: none;
 background-repeat: no-repeat;
 cursor: pointer;
}
.ggBtns a em {
 display: block;
 width: 210px;
 height: 40px;
 margin: 0 auto;
 overflow: hidden;
}
.ggBtns a:hover {
 color: #e7e7e7;
}
.ggBtns a:focus {
 outline: none;
}
.ggBtns a.ggOn {
 color: #e7e7e7;
 background-position: 0 0;
}
.ggb, .ggBtns a {
 background-image: url(../images/main.jpg);
}
a.ggOn {
 background-image: url(../images/gg.png);
}

JS代码

终于来到重点部分了，这部分的代码不多，一起来看下吧。





不知亲们看完以上的注释，知道原理了没有呢？其实整个代码分为四个部分：

1、图片切换 

以i作为计数器，显示当前为i的图片，其它图片全部隐藏，给当前为i的按钮加上ggOn样式，其它按钮去除ggOn样式，而每次调用切换函数时i自增1。

2、自动播放

定义一个定时器loop，每5秒调用一次切换函数。

3、鼠标hover事件

原来就是鼠标悬浮时清除loop定时器，鼠标离开时载入loop定时器。

4、按钮事件

绑定tab按钮单击事件，单击后给i赋上当前tab按钮的index值-1,调用切换函数。
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com