快捷導(dǎo)航

js 基礎(chǔ)篇必看(點(diǎn)擊事件輪播圖的簡(jiǎn)單實(shí)現(xiàn))

更新時(shí)間：2016年08月20日 09:02:01 投稿：jingxian

下面小編就為大家?guī)?lái)一篇js 基礎(chǔ)篇必看(點(diǎn)擊事件輪播圖的簡(jiǎn)單實(shí)現(xiàn))。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

輪播圖在以后的應(yīng)用中還是比較常見(jiàn)的，不需要多少行代碼就能實(shí)現(xiàn)。但是在只掌握了js基礎(chǔ)知識(shí)的情況下，怎么來(lái)用較少的而且邏輯又簡(jiǎn)單的方法來(lái)實(shí)現(xiàn)呢？下面來(lái)分析下幾種不同的做法：

1、利用位移的方法來(lái)實(shí)現(xiàn)

首先，我們可以在body中添加一個(gè)div并且將寬度設(shè)置成百分比（自適應(yīng)頁(yè)面），比例具體是相對(duì)誰(shuí)的百分比的話按需求來(lái)做，在這里不多說(shuō)。將圖片放入到div 中。

其次，樣式部分將img標(biāo)簽全部設(shè)置成absolute；以方便定位

最后，js部分說(shuō)說(shuō)邏輯，定義兩個(gè)空數(shù)組，第一個(gè)數(shù)組用來(lái)保存初始的顯示在頁(yè)面的圖片和等待進(jìn)入的圖片，第二個(gè)數(shù)組保存其余的n張圖片，假設(shè)這兩個(gè)數(shù)組分別設(shè)置為：waitToShow=[]; 和 goOut=[]; waitToShow.shift();彈出第一張圖片假如命名為showFirst，并為showFirst圖片設(shè)置位移和移動(dòng)時(shí)間，執(zhí)行完成之后showFirst放入goOut尾部：goOut.push(showFirst); 這時(shí)waitToShow數(shù)組的第0個(gè)元素就變成原來(lái)的第二張要顯示的圖片，給這個(gè)圖片waitToShow[0]設(shè)置位移和移動(dòng)時(shí)間，并且將goOut數(shù)組的首元素圖片彈出來(lái)，在放進(jìn)waitToShow數(shù)組的尾部，保證waitToShow數(shù)組永遠(yuǎn)是一張顯示的圖片和待顯示的圖片，這樣就通過(guò)兩個(gè)數(shù)組形成了一個(gè)循環(huán)來(lái)完成輪播圖的實(shí)現(xiàn)。反向的邏輯是一樣的（由于邏輯過(guò)于復(fù)雜這里不推薦）

2、利用層級(jí)的高低來(lái)使最頂部圖片變化的做法（這個(gè)做法沒(méi)有位移的動(dòng)作，但是邏輯卻非常簡(jiǎn)便，很實(shí)用）

直接來(lái)代碼更直觀點(diǎn)：基本每行都有注釋

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>輪播圖 (閃現(xiàn) 自適應(yīng))</title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
.wrap {
width: 60%;
background: red;
margin: auto;
position: relative;
}
.wrap img {
width: 100%;
position: absolute;
/*z-index: 10;*/
}
input {
border: 1px solid lightgray;
width: 50px;
height: 30px;
background: red;
border-radius: 5px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<img src="img/01.jpg" alt="" />
<img src="img/02.jpg" alt="" />
<img src="img/03.jpg" alt="" />
<img src="img/04.jpg" alt="" />
</div>
<input type="button" id="butLeft" name="name" value="◀︎">
<input type="button" id="butRight" name="name" value="▶︎">
</body>
<script type="text/javascript">
// 獲取images元素生成字符串?dāng)?shù)組，字符串?dāng)?shù)組不能進(jìn)行push pop splice 等操作
// 所以要將它的值重新存放進(jìn)一個(gè)數(shù)組中，后面有定義
var images = document.getElementsByTagName('img');
var butLeft = document.getElementById('butLeft');
var butRight = document.getElementById('butRight');
//獲取變量index 用來(lái)為后面設(shè)置層級(jí)用
var index = 1000;
// 獲取一個(gè)空的數(shù)組，用來(lái)存放images里面的字符串元素
var imagess = [];

// for循環(huán)用來(lái)給imagess數(shù)組賦值，并且改變數(shù)組中的元素的層級(jí)
for (var i = 0; i < images.length; i++) {
imagess[i] = images[i];
var currentImage = imagess[i];
// 當(dāng)前圖片的層級(jí)的設(shè)置，一輪for循環(huán)都為他們?cè)O(shè)置了初始的zIndex，圖片越靠前，層級(jí)設(shè)置
// 要求越高，所以用的是－i,這樣圖片會(huì)按順序從第一張，第二張.....依次向下
currentImage.style.zIndex = -i;
}

// 設(shè)置計(jì)數(shù)器count，執(zhí)行一次點(diǎn)擊事件（向左或者向右）count加1
var count = 0;
// 向左的點(diǎn)擊事件
butLeft.onclick = function() {
// 從數(shù)組頭部彈出一個(gè)圖片元素
var showFirst = imagess.shift();
// 給彈出的這個(gè)圖片元素設(shè)置層級(jí)，即 －1000+count，
// 讓層級(jí)相較其他元素是最小的，數(shù)組頭部彈出的圖片會(huì)顯示在最底層
showFirst.style.zIndex = - index + count;
// 層級(jí)改變完成后再將他push進(jìn)數(shù)組的尾部
imagess.push(showFirst);
// 點(diǎn)擊一次加1，不用考慮具體的值，只需要有點(diǎn)擊事件加 1
count++;
}
// 向右點(diǎn)擊事件
butRight.onclick = function() {
// 從imagess的尾部彈出一個(gè)元素，并賦值給showFirst
var showFirst = imagess.pop();
// 設(shè)置showFirst的層級(jí)為最大，1000+count ，這樣他會(huì)顯示在第一層
showFirst.style.zIndex = index + count;
// 層級(jí)改變之后將他在插入數(shù)組imagess的頭部
imagess.unshift(showFirst);
// 點(diǎn)擊一次加1
count++;
}
</script>
</html>

以上這篇js 基礎(chǔ)篇必看(點(diǎn)擊事件輪播圖的簡(jiǎn)單實(shí)現(xiàn))就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: