【前端】javascript實現帶有子菜單和控制項的輪播圖slider

来源:http://www.cnblogs.com/dragonir/archive/2017/10/31/7764486.html
-Advertisement-
Play Games

實現效果: 實現原理: // 步驟 // 1. 獲取事件源以及相關元素 // 2. 複製第一張圖片所在的li,添加到ul的最後面 // 3. 給ol添加li,ul中的個數-1個,並點亮第一個按鈕 // 4. 滑鼠放到ol的li上切換圖片 // 5. 添加定時器 // 6. 左右切換圖片(滑鼠放上去隱 ...


實現效果:

實現原理:

// 步驟
// 1. 獲取事件源以及相關元素
// 2. 複製第一張圖片所在的li,添加到ul的最後面
// 3. 給ol添加li,ul中的個數-1個,並點亮第一個按鈕
// 4. 滑鼠放到ol的li上切換圖片
// 5. 添加定時器
// 6. 左右切換圖片(滑鼠放上去隱藏,移開顯示)

實現代碼:

<!DOCTYPE html>
<html>
<head>
	<title>輪播圖</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			list-style: none;
			border: 0;
		}
		.all{
			width: 500px;
			height: 200px;
			padding: 7px;
			margin: 100px auto;
			position: relative;
			box-shadow: 1px 1px 5px #2d2d2d;
		}
		.screen{
			width: 500px;
			height: 200px;
			overflow: hidden;
			position: relative;
		}
		.screen li{
			width: 500px;
			height: 200px;
			overflow: hidden;
			float: left;
		}
		.screen ul{
			position: absolute;
			left: 0;
			top: 0;
			width: 3000px;
		}
		.all ol{
			position: absolute;
			right: 10px;
			bottom: 10px;
			line-height: 20px;
			text-align: center;
		}
		.all ol li{
			float: left;
			width: 20px;
			height: 20px;
			text-align: center;
			background-color: #fff;
			border: 1px solid #ccc;
			margin-left: 10px;
			cursor: pointer;
		}
		.all ol li.current{
			background-color: #03c03c;
		}
		#arr{
			display: none;
		}
		#arr span{
			width: 40px;
			height: 40px;
			left: 5px;
			top: 50%;
			position: absolute;
			margin-top: -20px;
			background-color: #000;
			cursor: pointer;
			line-height: 35px;
			text-align: center;
			font-weight: bold;
			font-family: "微軟雅黑";
			font-size: 30px;
			color: #fff;
			opacity: 0.3;
			border-radius: 50%;
			box-shadow: 1px 1px 3px #2d2d2d;
		}
		#arr #right{
			right: 5px;
			left: auto;
		}
	</style>
</head>
<body>
<div class="all" id="all">
	<div class="screen" id="screen">
		<ul id="ul">
			<li><img src="./images/01.jpg" width="500" height="200"></li>
			<li><img src="./images/02.jpg" width="500" height="200"></li>
			<li><img src="./images/03.jpg" width="500" height="200"></li>
			<li><img src="./images/04.jpg" width="500" height="200"></li>
			<li><img src="./images/05.jpg" width="500" height="200"></li>
		</ul>
		<!-- 圖片子菜單 -->
		<ol>
			
		</ol>
		<!-- 左右切換按鈕 -->
		<div id="arr">
			<span id="left"><</span>
			<span id="right">></span>
		</div>
	</div>
</div>

<!-- script -->
<script type="text/javascript">
	// 賦值第一張圖片放到ul的最後,當圖片切換到第五張的時候,直接切換第六張,再從第一張切換到第二張的時候先瞬間切換到第一張圖片,然後滑倒第二張

	// 步驟
	// 1. 獲取事件源以及相關元素
	// 2. 複製第一張圖片所在的li,添加到ul的最後面
	// 3. 給ol添加li,ul中的個數-1個,並點亮第一個按鈕
	// 4. 滑鼠放到ol的li上切換圖片
	// 5. 添加定時器
	// 6. 左右切換圖片(滑鼠放上去隱藏,移開顯示)

	// 1. 獲取事件源以及相關元素
	var all = document.getElementById("all");
	var screen = all.firstElementChild || all.firstChild;
	var imgWidth = screen.offsetWidth;
	var ul = screen.firstElementChild || screen.firstChild;
	var ol = screen.children[1];
	var div = screen.lastElementChild || screen.lastChild;
	var spanArr = div.children;

	// 2. 複製第一張圖片所在的li,添加到ul的最後面
	var ulNewLi = ul.children[0].cloneNode(true);
	ul.appendChild(ulNewLi);

	// 3. 給ol添加li,ul中的個數-1個,並點亮第一個按鈕
	for(var i=0; i<ul.children.length-1; i++){
		var olNewLi = document.createElement("li");
		olNewLi.innerHTML = i+1;
		ol.appendChild(olNewLi);
	}	
	var olLiArr = ol.children;
	olLiArr[0].className = "current";

	// 4. 滑鼠放到ol的li上切換圖片
	for(var i=0; i<olLiArr.length; i++){
		// 自定義屬性,把索引值綁定到元素的index屬性上
		olLiArr[i].index = i;
		olLiArr[i].onmouseover = function(){
			// 排他思想
			for(var j=0; j<olLiArr.length; j++){
				olLiArr[j].className = "";
			}
			this.className = "current"
			// 滑鼠放到小方塊上時,索引值和key以及square同步
			// key = this.index;
			// square = this.index;
			key = square = this.index;
			// 移動盒子
			animate(ul, -this.index*imgWidth);
		}
	}

	// 5. 添加定時器
	var timer = setInterval(autoPlay, 1000);

	// 固定向右切換圖片
	// 兩個定時器(一個記錄圖片,一個記錄子菜單欄)
	var key = 0;
	var square = 0;
	function autoPlay(){
		// 通過key的自增來模擬圖片的索引值,然後移動ul
		key++;
		if(key > olLiArr.length){
			// 圖片已經滑到最後一張,接下來應該跳轉到第一張,然後滑動到第二張
			ul.style.left = 0;
			key = 1;
		}
		animate(ul, -key*imgWidth);
		// 通過控制square的自增來模擬小方塊的索引值,然後點亮盒子
		// 排他思想做小方塊
		square++;
		if(square > olLiArr.length-1){
			// 索引值不能大於5,如果大於5則立即變為0;
			square = 0;
		}
		for(var i=0; i<olLiArr.length; i++){
			olLiArr[i].className = "";
		}
		olLiArr[square].className = "current";
	}

	// 滑鼠放上去清除定時器,移開啟動定時器
	all.onmouseover = function(){
		div.style.display = "block";
		clearInterval(timer);
	}
	all.onmouseout = function(){
		div.style.display = "none";
		timer = setInterval(autoPlay,1000);
	}

	// 6. 左右切換圖片(滑鼠放上去顯示,移開隱藏)
	spanArr[0].onclick = function(){
		// 通過控制key的自增來模擬圖片的索引值,然後移動ul
		key--;
		if(key<0){
			// 先移到最後一張,然後key的值取前一張的索引值,然後向前移動
			ul.style.left = -imgWidth*(olLiArr.length) + "px";
			key = olLiArr.length-1;
		}
		animate(ul, -key*imgWidth);
		// 通過控制square的自增來模擬小方塊的索引值,然後點亮小方塊
		square--;
		if(square<0){
			// 索引值不能大於等於5,如果為5,立即變為0
			square = olLiArr.length-1;
		}
		for(var i=0; i<olLiArr.length; i++){
			olLiArr[i].className = "";
		}
		olLiArr[square].className = "current";
	}

	spanArr[1].onclick = function(){
		// 右側的和定時器一模一樣
		autoPlay();
	}

	// 動畫封裝
	var absSpeed = 10; //設定步長
	function animate(ele, target){
		clearInterval(ele.timer);
		var speed = target > ele.offsetLeft ? absSpeed : -absSpeed;
		ele.timer = setInterval(function(){
			var val = target - ele.offsetLeft;
			ele.style.left = ele.offsetLeft + speed + "px";
			if(Math.abs(val) < Math.abs(speed)){
				ele.style.left = target + "px";
				clearInterval(ele.timer);
			}
		}, 10)
	}
</script>
</body>
</html>

  


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一般我發現slot都是用在子組件 不知道對不對,不對的請留言指教 ,謝謝謝謝 使用slot場景一: 子組件Minput.vue 父組件 Minput 這種情況下 Minput標簽內的文字是不會渲染出來的 如果現在想在裡面把文字渲染出來怎麼辦 好 用slot 子組件 這樣的話,父組件的裡面的文字就可以 ...
  • 今天在調試bug的時候有一個需求,我需要知道我的代碼中有哪些地方在修改body的style,然後我想到了DOM節點監聽。 為body添加斷點然後開始調試,但是現在的前端技術棧太複雜,即使打了斷點也會跳進第三方包里。調用棧里有太多無關的js代碼,妨礙調試。 所以你可以選中文件右擊後,選擇Blackbo ...
  • 在開發的過程中,幾乎不可能一次性就能寫出毫無破綻的程式,斷點調試代碼是一個普遍的需求。 作為前端開發工程師,以往我們開發的JavaScript程式都運行在瀏覽器端,利用Chrome提供的開發者工具就可以方便的進行源碼斷點調試。其步驟有四,詳情不表,粗略概括如下: 但是,當我們用JavaScript開 ...
  • 控制項概述 Google Maps 上的地圖包含用戶界面元素,可以讓用戶通過地圖進行交互。這些元素稱為“控制項”。您可以在 Google Maps API 應用程式中添加這些控制項的多種組合。或者,您也可以不進行任何操作,讓 Google Maps API 處理所有控制項行為。 Google Maps AP ...
  • /** 日期格式化 */Date.prototype.Format = function(format) { var o = { "M+" : this.getMonth() + 1, // month "d+" : this.getDate(), // day "H+" : this.getHou ...
  • z 品牌:騰訊案例地址:http://www.199case.com/caseview.aspx?id=624 來源:199case_H5案例庫 1、內容:通過首頁的js動態按鈕進入下一界面,整個過程橫屏設置,採用了拍攝好的完整多骨諾視頻,並且在視頻的不同節點出現相應文字,可以鮮明和充分的展現TEG ...
  • 品牌:保時捷 案例地址:http://www.199case.com/caseview.aspx?id=2875 來源:199case-H5案例庫 1、內容:一個以”捕捉迅疾魅影“為主題的聲音識別類的h5,用戶可以通過聽取最大的跑車的引擎聲,然後點擊相機狀的按鈕,即可拍攝成功,最後展示類保時捷的跑車 ...
  • 複習作用域 上一節我們說到作用域:是指變數可以訪問的範圍,他規定瞭如何查找變數,以及確定當前執行代碼對變數的訪問許可權;也說到靜態作用域即詞法作用域,是在編譯階段決定變數的引用(由程式定義的位置決定,和代碼執行順序無關,用嵌套的方式解析)。 凝問 如上代碼,在執行run函數時,在run作用域中有nam ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...