时间：2021-07-01 10:21:17 帮助过：4人阅读
引入jquery库
构建html
整个代码分为三部分：
1、加载部分loadding ；
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,调用切换函数。
以上就是jquery实现图片轮播的全部关键性代码，希望大家仔细研究，教程中仍存在许多不足，希望大家予以改进。