js 點擊事件輪播圖的簡單實現-js教程-PHP中文網

首頁

web前端

js教程

js 點擊事件輪播圖的簡單實現

高洛峰

Jan 21, 2017 am 09:32 AM

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

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

首先，我們可以在body中添加一個div並且將寬度設置成百分比（自適應頁），比例具體是相對誰的百分比的話依需求來做，這裡不多說。將圖片放入到div 中。

其次，樣式部分將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>
<div class="wrap">
<img src="/static/imghwm/default1.png"  data-src="img/01.jpg"  class="lazy"   alt="" />
<img src="/static/imghwm/default1.png"  data-src="img/02.jpg"  class="lazy"   alt="" />
<img src="/static/imghwm/default1.png"  data-src="img/03.jpg"  class="lazy"   alt="" />
<img src="/static/imghwm/default1.png"  data-src="img/04.jpg"  class="lazy"   alt="" />
</div>
<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>

以上這篇js 基礎篇必看(點擊事件輪播圖的簡單實現)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援PHP中文網。

更多js 點擊事件輪播圖的簡單實作相關文章請關注PHP中文網！

陳述

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

在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答本文將探討兩種在JavaScript中替換字符串字符的方法：在JavaScript代碼內部替換和在網頁HTML內部替換。在JavaScript代碼內部替換字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項，需使用正則表達式並添加全局標誌g： str = str.replace(/fi

自定義Google搜索API設置教程Mar 04, 2025 am 01:06 AM

本教程向您展示瞭如何將自定義的Google搜索API集成到您的博客或網站中，提供了比標準WordPress主題搜索功能更精緻的搜索體驗。令人驚訝的是簡單！您將能夠將搜索限制為Y

構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM

因此，在這裡，您準備好了解所有稱為Ajax的東西。但是，到底是什麼？ AJAX一詞是指用於創建動態，交互式Web內容的一系列寬鬆的技術。 Ajax一詞，最初由Jesse J創造

示例顏色json文件Mar 03, 2025 am 12:35 AM

本文系列在2017年中期進行了最新信息和新示例。在此JSON示例中，我們將研究如何使用JSON格式將簡單值存儲在文件中。使用鍵值對符號，我們可以存儲任何類型的

8令人驚嘆的jQuery頁面佈局插件Mar 06, 2025 am 12:48 AM

利用輕鬆的網頁佈局：8 ESTISSEL插件jQuery大大簡化了網頁佈局。本文重點介紹了簡化該過程的八個功能強大的JQuery插件，對於手動網站創建特別有用

什麼是這個＆＃x27;在JavaScript？Mar 04, 2025 am 01:15 AM

核心要點 JavaScript 中的 this 通常指代“擁有”該方法的對象，但具體取決於函數的調用方式。沒有當前對象時，this 指代全局對象。在 Web 瀏覽器中，它由 window 表示。調用函數時，this 保持全局對象；但調用對象構造函數或其任何方法時，this 指代對象的實例。可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。這些方法使用給定的 this 值和參數調用函數。 JavaScript 是一門優秀的編程語言。幾年前，這句話可