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

時間 2019-12-07

標籤前端 javascript 實現帶有菜單控件 slider 欄目 JavaScript 简体版

原文原文鏈接

實現效果：javascript

實現原理：css

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

實現代碼：java

<!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>