Dieser Artikel beschreibt ein Beispiel-Tutorial zur Implementierung eines Widescreen-Bildkarussells mit jQuery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der Screenshot des Laufeffekts sieht wie folgt aus:
Jquery-Bibliothek vorstellen
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
Nach dem Login kopieren
HTML erstellen
Der gesamte Code ist in drei Teile unterteilt:
1. Teil laden;
2. Im Bildteil können hier nur 4 Bilder sein
3. Der TAB-Tastenteil gibt es hier natürlich nur 4 und sie müssen auch verbessert werden.
<div class="gg" id="gg">
<div class="ggLoading">
<div class="ggLoading2"><em>精彩活动载入中</em></div>
</div>
<div class="ggs">
<div class="ggBox" id="ggBox">
<a href="#" title="5月22日测试开启领报名资格" style="z-index: 3; opacity: 4;">
<img src="images/1.jpg" alt="" /></a>
<a href="#" title="首测世界的雕琢篇章开启">
<img src="images/2.jpg" alt="" /></a>
<a href="#" title="上古世纪游戏资料手册">
<img src="images/3.jpg" alt="" /></a>
<a href="#" title="游戏四大特色揭晓">
<img src="images/4.jpg" alt="" /></a>
</div>
</div>
<div class="ggb">
<div class="ggBtns" id="ggBtns">
<a title="5月22日测试开启领报名资格" href='javascript:void(0)' class="ggOn"><em>5月22日测试开启领报名资格</em></a>
<a title="首测世界的雕琢篇章开启" href='javascript:void(0)'><em>首测世界的雕琢篇章开启</em></a>
<a title="上古世纪游戏资料手册" href='javascript:void(0)'><em>上古世纪游戏资料手册</em></a>
<a title="游戏四大特色揭晓" href='javascript:void(0)'><em>游戏四大特色揭晓</em></a>
</div>
</div>
</div>Nach dem Login kopieren
CSS-Stil
Das CSS hier kann je nach Projektanforderungen angepasst werden. Sie müssen sich nicht an den folgenden Code halten, solange Sie die Prinzipien verstehen. Wenn Sie das folgende CSS nicht verstehen, machen Sie es einfach wieder gut. Ich werde es hier nicht einzeln erklären.
.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);
}Nach dem Login kopieren
JS-Code
Endlich sind wir beim wichtigen Teil angelangt. Dieser Teil enthält nicht viel Code, also werfen wir einen Blick darauf.
$(function () {//文档加载后执行
//定义$con,$box,$btns,$i变量，autoChange自动播放函数，loop定时器。
var $con = $('#gg'), $box = $con.find('#ggBox'), $btns = $con.find('#ggBtns'), i = 0, autoChange = function () {
i += 1;//计数器+1
if (i === 4) { i = 0; }//如果计数器i等4就把i重置为0.
$btns.find('a:eq(' + i + ')').addClass('ggOn').siblings().removeClass('ggOn');
//找到TAB按钮中的第i个a标签，为其加上ggOn的样式，同时移除所有同级的a标签ggOn样式
var curr = $box.find('a:eq(' + i + ')'), prev = curr.siblings();
//定义curr变量，并赋值为$box中当前显示图片的a标签，定义prev变量，赋值为$box中除了当前显示图片的A标签外的所有A标签。
prev.css('z-index', 2);//$box中除了当前显示图片的A标签外的所有A标签的index值变为2，即向下移一层
curr.css('z-index', 3).animate({ //$box中当前显示图片的a标签index值变为3，即向上移一层，然后使用jquery动画以150毫秒把透明度变为1，之后执行匿名函数function。
'opacity': 1
}, 150, function () { //$box中除了当前显示图片的A标签外的所有A标签的index值变为1，并把透明度变为0.1
prev.css({
'z-index': 1, 'opacity': 0.1
});
});
}, loop = setInterval(autoChange, 5000);//定义定时器，每5秒执行一次autoChange函数，达到自动播放效果。
$con.hover(function () { //定义鼠标悬浮与离开事件
clearInterval(loop); //鼠标悬浮时移除Loog定时器，即停止播放
}, function () {
loop = setInterval(autoChange, 5000); //鼠标离开时载放Loog定时器，继续播放
});
$btns.find('a').click(function () {//定义tab按钮事件
i = $(this).index() - 1; //tab按钮中当前A标签的index值-1，并赋值给i计数器
autoChange(); //调用切换方法切换图片
});
});
Nach dem Login kopieren
Ich frage mich, ob ihr das Prinzip versteht, nachdem ihr die obigen Hinweise gelesen habt? Tatsächlich ist der gesamte Code in vier Teile unterteilt:
1. Bildwechsel
Verwenden Sie i als Zähler, zeigen Sie das aktuelle Bild für i an, blenden Sie alle anderen Bilder aus, fügen Sie den ggOn-Stil zur aktuellen Schaltfläche für i hinzu, entfernen Sie den ggOn-Stil für andere Schaltflächen und ich werde jedes Mal das erhöhen Die Schaltfunktion heißt 1.
2. Automatische Wiedergabe
Definieren Sie eine Timer-Schleife, um alle 5 Sekunden die Schaltfunktion aufzurufen.
3. Maus-Hover-Ereignis
Es stellt sich heraus, dass der Loop-Timer gelöscht wird, wenn die Maus schwebt, und der Loop-Timer geladen wird, wenn die Maus geht.
4. Button-Ereignis
Binden Sie das Klickereignis für die Tab-Schaltfläche. Weisen Sie nach dem Klicken den Indexwert der aktuellen Tab-Schaltfläche -1 zu und rufen Sie die Umschaltfunktion auf.
Das Obige ist der gesamte Schlüsselcode für jquery zum Implementieren des Bildkarussells. Ich hoffe, dass Sie ihn sorgfältig studieren. Es gibt noch viele Mängel im Tutorial und ich hoffe, dass Sie ihn verbessern können.
