輪播圖的實現原理
阿新 • • 發佈：2019-02-02
一、實現輪播圖最主要的就是定時器 （setInterval 函式和 clearInterval 函式），他們分別是定時和清除定時。
二 、html程式碼如下：
<div class="warp">
<div class="mod-tab">
<ul id="list">
<li class="tab-con" style="opacity: 1">
<span class="pic">
<a 上面是用八張圖實現的輪播的html圖。
三、css程式碼如下：
.warp{
width: 100%;
}
.mod-tab{
width: 100%;
min-width: 1200px;
height: 383px;
margin: 0 auto 30px;
position: relative;
}
.gb-tab-pn{
overflow: hidden;
height: 383px;
position: relative;
}
ul{
list-style: none;
}
.tab-con{
height: 383px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.pic{
height: 383px;
width: 100%;
}
.pic a{
display: block;
width: 100%;
height: 383px;
background-position: center center;
background-repeat: no-repeat;
}
.gb-tab{
overflow: hidden;
position: absolute;
z-index: 60;
bottom: 0;
height: 40px;
width: 100%;
text-align: center;
}
.gb-tab .item{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 6px;
color: #6ff;
background-color: #003c49;
text-align: center;
line-height: 16px;
}
.item2{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 6px;
color: #6ff;
background-color: #ffffff;
text-align: center;
line-height: 16px;
}
.gb-tab a:hover{
background-color: #ffffff;
}
.on{
background-color: #ffffff;
}
.arrow{
position: absolute;
top: 171px;
z-index: 99;
display: none;
width: 40px;
height: 40px;
font-size: 36px;
font-weight: bold;
line-height: 39px;
text-align: center;
color: #fff;
background-color: RGBA(0, 0, 0, .3);
cursor: pointer;
}
.arrow:hover {
background-color: RGBA(0, 0, 0, .7);
}
.warp:hover .arrow {
display: block;
}
#prev {
left: 20px;
}
#next {
right: 20px;
}css程式碼主要是用來定位。
四、js程式碼如下：
var list = $('#list .tab-con'); //獲取與圖片相關的<li>物件
var container = $('.mod-tab'); //獲取整個輪播圖容器物件
var index = 1; //指當前圖片物件
var timer; //定時物件
var buttons = $('#gb-tab a'); //獲取圖片下面的按鈕物件
var prev = $('#prev'); //獲取左按鈕物件
var next = $('#next'); //獲取右按鈕物件
var stateNext = true;
var statePrev = true;
$(document).ready(function(){
container.mouseover(function(){ //用於滑鼠進入輪播圖區域停止輪播
stop();
});
container.mouseout(function(){ //用於滑鼠離開輪播圖區域開始輪播
play();
});
for (var i = 0; i < buttons.length; i++) { //迴圈繫結下面按鈕的點選事情
(function (i) {
buttons[i].onclick = function () {
index = i + 1;
imgShow();
buttonsShow();
}
})(i)
}
prev.click(function () { //點選左按鈕輪播圖片事件。利用延時器解決無限點選問題。
if(statePrev){
index -= 1;
if (index < 1) {
index = 8
}
imgShow();
buttonsShow();
statePrev = false;
setTimeout(function(){
statePrev = true;
},2000)
}
});
next.click(function () {
//由於上邊定時器的作用，index會一直遞增下去，我們只有8個小圓點，所以需要做出判斷
if(stateNext){
index += 1;
if (index > 8) {
index = 1
}
imgShow();
buttonsShow();
stateNext = false;
setTimeout(function(){
stateNext = true
},2000)
}
});
});
function play() { //開始輪播函式
//重複執行的定時器
timer = setInterval(function () {
index += 1;
if (index > 8) {
index = 1
}
imgShow();
buttonsShow();
}, 4000)
}
function stop() { //停止輪播函式
clearInterval(timer);
}
function imgShow(){ //圖片顯示函式
for (var i = 0; i < list.length; i++) {
if (list.eq(i).css('opacity') == 1) {
list.eq(i).fadeTo(1000,0);
}
}
list.eq(index - 1).fadeTo(1000,1);
}
function buttonsShow() { 圖片下面按鈕的顯示函式。
//將之前的小圓點的樣式清除
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].className == "item2") {
buttons[i].className = "item";
}
}
buttons[index - 1].className = "item2";
}
play();五、總結
在html ，css 已經寫好的情況下。最主要的就是js的功能問題了。輪播圖的功能步驟如下：
1.先讓圖片輪播起來。基本就是寫一個 play函式裡面加定時器，每次使圖片的index物件加一，當index大於最大值時，設定index等於第 一張圖片.這樣輪播圖就動起來了。
輪播圖動起來基本就是隻顯示一張圖片隱藏其他的圖片。我上面使用的是opacity 。
圖片下面的按鈕。主要就是使下面的按鈕與上面的圖片一一對應。然後點選下面的按鈕顯示對應的圖片。
左右的上一張和下一張按鈕。點選左邊的上一張按鈕圖片向前顯示，實現原理就是使 index 物件減一。點選左邊的下一張按鈕圖片向後顯示，實現原理就是使 index 物件加一。
對應上一張和下一張連續點選的問題就是給這兩個按鈕加上延時器。
當滑鼠放在輪播圖區域時停止輪播，實現原理就是清除定時器，離開開始輪播就是加上定時器。