前端javascript实现带有子菜单和控件的轮播图slider

Posted 2020-10-12 Dragonir

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端javascript实现带有子菜单和控件的轮播图slider相关的知识，希望对你有一定的参考价值。

实现效果：

实现原理：

// 步骤
// 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>

以上是关于前端javascript实现带有子菜单和控件的轮播图slider的主要内容，如果未能解决你的问题，请参考以下文章

轮播控件外的轮播控件

原生JS实现过渡效果的轮播图

JavaScript实现的轮播图

用原生的javascript 实现一个无限滚动的轮播图

前端：HTML+CSS+JavaScript实现轮播图