首頁  >  文章  >  web前端  >  javascript利用層級高低來實現圖片變化程式碼詳解

javascript利用層級高低來實現圖片變化程式碼詳解

伊谢尔伦
伊谢尔伦原創
2018-05-11 16:10:542576瀏覽

輪播圖在以後的應用中還是比較常見的,不需要多少行程式碼就能實現。但是在只掌握了js基礎的情況下,怎麼來用較少的而且邏輯又簡單的方法來實現呢?下面來分析下幾種不同的做法:

1、利用位移的方法來實現

#首先,我們可以在body中加入一個p並且將寬度設定成百分比(自適應頁面),比例具體是相對誰的百分比的話按需求來做,在這裡不多說。將圖片放入p 中。

其次,樣式部分將img標籤全部設定成absolute;以方便定位

最後,js部分說說邏輯,定義兩個空數組,第一個數組用來保存初始的顯示在頁面的圖片和等待進入的圖片,第二個數組保存其餘的n張圖片,假設這兩個數組分別設定為:waitToShow=[]; 和goOut=[];   waitToShow.shift();彈出第一張圖片假如命名為showFirst,並為showFirst圖片設定位移和移動時間,執行完成之後showFirst放入goOut尾部:goOut.push(showFirst);  這時waitToShow數組的第0個元素就變成原來的第二張要顯示的圖片,給這個圖片waitToShow[0]設定位移和移動時間,並且將goOut數組的首元素圖片彈出來,在放進waitToShow數組的尾部,保證waitToShow數組永遠是一張顯示的圖片和待顯示的圖片,這樣就透過兩個陣列形成了一個循環來完成輪播圖的實現。反向的邏輯是一樣的(由於邏輯過於複雜這裡不推薦)

2、利用層級的高低來使最頂部圖片變化的做法

直接來程式碼更直觀點:基本每行都有註解

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图 (闪现 自适应)</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>
<p 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="" />
</p>
<input type="button" id="butLeft" name="name" value="◀︎">
<input type="button" id="butRight" name="name" value="▶︎">
</body>
<script type="text/javascript">
// 获取images元素生成字符串数组,字符串数组不能进行push pop splice 等操作
// 所以要将它的值重新存放进一个数组中,后面有定义
var images = document.getElementsByTagName(&#39;img&#39;);
var butLeft = document.getElementById(&#39;butLeft&#39;);
var butRight = document.getElementById(&#39;butRight&#39;);
//获取变量index 用来为后面设置层级用
var index = 1000;
// 获取一个空的数组,用来存放images里面的字符串元素
var imagess = [];

// for循环用来给imagess数组赋值,并且改变数组中的元素的层级
for (var i = 0; i < images.length; i++) {
imagess[i] = images[i];
var currentImage = imagess[i];
// 当前图片的层级的设置,一轮for循环都为他们设置了初始的zIndex,图片越靠前,层级设置
// 要求越高,所以用的是-i,这样图片会按顺序从第一张,第二张.....依次向下
currentImage.style.zIndex = -i;
}

// 设置计数器count,执行一次点击事件(向左或者向右)count加1
var count = 0;
// 向左的点击事件
butLeft.onclick = function() {
// 从数组头部弹出一个图片元素
var showFirst = imagess.shift();
// 给弹出的这个图片元素设置层级,即 -1000+count,
// 让层级相较其他元素是最小的,数组头部弹出的图片会显示在最底层
showFirst.style.zIndex = - index + count;
// 层级改变完成后再将他push进数组的尾部
imagess.push(showFirst);
// 点击一次加1,不用考虑具体的值,只需要有点击事件加 1
count++;
}
// 向右点击事件
butRight.onclick = function() {
// 从imagess的尾部弹出一个元素,并赋值给showFirst
var showFirst = imagess.pop();
// 设置showFirst的层级为最大,1000+count ,这样他会显示在第一层
showFirst.style.zIndex = index + count;
// 层级改变之后将他在插入数组imagess的头部
imagess.unshift(showFirst);
// 点击一次加1
count++;
}
</script>
</html>

以上是javascript利用層級高低來實現圖片變化程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn