原生js轮播图

纯原生js轮播图

html代码

<div class="box">
				<!-- 左右焦点div -->
				<div id="focus" class="clearfix">
					<span id="left">&lt;</span>
					<span id="right">&gt;</span>
				</div>
				<!-- 相册 -->
				<ul id="rahmen" class="clearfix">
					<li><a href="#"><img src="images/1.jpg"></a></li>
					<li><a href="#"><img src="images/2.jpg"></a></li>
					<li><a href="#"><img src="images/3.jpg"></a></li>
					<li><a href="#"><img src="images/4.jpg"></a></li>
					<li><a href="#"><img src="images/5.jpg"></a></li>
				</ul>
				<!-- 小圆点 -->
				<ol></ol>
			</div>

CSS代码

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	*zoom: 1;
}

/* IE6、7 专有 */
.box {
	width: 600px;
	height: 400px;
	margin: 60px auto;
	position: relative;
	overflow: hidden;
	box-shadow: 2px 10px 13px 16px rgba(0, 0, 0, .4);
}

img {
	display: block;
}

#focus {
	width: 100%;
	height: 100%;
	position: absolute;
	display: none;
}

#focus span {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	margin-top: -20px;
	background: #000;
	cursor: pointer;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
	font-family: '黑体';
	font-size: 30px;
	color: #fff;
	opacity: 0.3;
	border: 1px solid #fff;
	z-index: 10;
}

#focus #right {
	right: 0;
}

#focus span:hover {
	opacity: 0.8;
	background-color: skyblue;
}

li {
	list-style: none;
	float: left;
}

#rahmen {
	width: 600%;
	position: absolute;
}

#rahmen img {
	width: 600px;
	height: 400px;
}

.box ol {
	/* background-color: pink; */
	width: 100%;
	height: 20px;
	position: absolute;
	bottom: 20px;
	left: 40px;

}

.box ol li {
	display: inline-block;
	width: 12px;
	height: 12px;
	/* background-color: #00008B; */
	margin-right: 15px;
	border: 1px solid #fff;
	border-radius: 6px;
	cursor: pointer;
}

.box ol li:last-child {
	margin-right: 0;
}

.current {
	background-color: #FFFFFF;
}

js代码

// 1).获取元素

		// 获取最大的div
		var box = document.querySelector(".box");
		// 获取左右焦点div
		var focus = box.querySelector("#focus");
		// 获取右侧焦点按钮
		var right = document.getElementById("right");
		// 获取左侧焦点按钮
		var left = document.getElementById("left");
		// 获取ul
		var ulObj = document.getElementById("rahmen");
		// 获取ul里面所有的li
		var list = ulObj.querySelectorAll("li");
		// 获取ol
		var olObj = box.querySelector("ol");
		// 获取相框的宽度
		var imgWidth = box.offsetWidth;
		// 获取ul里面所有的a
		var aObjs = ulObj.querySelectorAll("a");

		// 定义一个变量,传给动画回调函数,让动画函数执行完毕后再执行下一个动作
		var flag = true;
		// 先为a标签注册鼠标点击事件,阻止超链接跳转
		for (var i = 0; i < aObjs.length; i++) {
			aObjs[i].onclick = function() {
				return false;
			};
		}

		//定义一个变量,储存当前ul需要移动的距离
		var walk = 0;
		//2).创建ol里面的li标签

		// 循环遍历ul里面的li,根据ul里面li的个数来创建小圆点
		for (var i = 0; i < list.length; i++) {
			//创建li标签,并且把它放入到ol当中
			var liObj = document.createElement("li");
			olObj.appendChild(liObj);
			// 为li标签添加自定义属性,储存它的索引值
			liObj.setAttribute("index", i);
			// 设置默认第一个li标签有背景颜色
			olObj.firstElementChild.className = "current";

			// 为每个li标签注册鼠标进入事件
			liObj.addEventListener("mouseover", mouseoverManage)
		}
		//小圆点li标签的鼠标进入事件命名函数
		function mouseoverManage() {
			if (flag) {
				flag = false;
				// 排他功能,移除所有的li标签的背景颜色
				for (var i = 0; i < olObj.children.length; i++) {
					olObj.children[i].removeAttribute("class");
				}
				//设置当前鼠标进入的按钮有背景颜色
				this.className = "current";
				//获取当前li标签的索引值
				walk = this.getAttribute("index");



				//让ul移动到指定位置

				animate(ulObj, -walk * imgWidth, function() {
					flag = true;
				});
			}
		}


		//4.右侧焦点按钮,注册事件
		//克隆ul里面的第一张照片,放到最后面,产生无缝效果
		ulObj.appendChild(ulObj.firstElementChild.cloneNode(true));
		// 为box注册鼠标进入事件,显示左右焦点div
		box.onmouseover = function() {
			focus.style.display = "block";
			// 鼠标进入时,停止定时器
			clearInterval(timer);
			// 清空定时器,不占内存
			timer = null;
		};
		// 为box注册鼠标离开事件,隐藏左右焦点div
		box.onmouseout = function() {
			focus.style.display = "none";
			//鼠标离开时,继续自动播放
			timer = setInterval(clickManage, 1500);
		};
		// 为右侧焦点按钮注册点击事件
		right.onclick = clickManage;

		function clickManage() {
			if (flag) {
				flag = false;
				//判断当前walk如果等于最后一张照片,则马上跳转到第一张,形成无缝小姑
				if (walk == olObj.children.length) {
					walk = 0;
					ulObj.style.left = 0 + "px";
				}
				walk++;
				animate(ulObj, -walk * imgWidth, function() {
					//等动画执行完,再执行下一步动作
					flag = true;
				});

				//判断当前如果是最后一张照片,则第一个小圆点显示背景颜色,否则正常显示
				if (walk == olObj.children.length) {
					olObj.children[olObj.children.length - 1].className = "";
					olObj.firstElementChild.className = "current";
				} else {
					//排他功能,移除所有小圆点的背景颜色
					for (var i = 0; i < olObj.children.length; i++) {
						olObj.children[i].removeAttribute("class");
					}
					//当前小圆点显示颜色
					olObj.children[walk].className = "current";
				}

			}
		};

		//5).为左侧按钮注册点击事件,移动ul
		left.onclick = function() {
			// 控制当前动作结束后,执行下一步动作
			if (flag) {
				flag = false;
				//判断当前walk如果等于最后一张照片,则马上跳转到第一张,形成无缝小姑
				if (walk == 0) {
					walk = olObj.children.length;
					ulObj.style.left = -walk * imgWidth + "px";
				}
				walk--;
				animate(ulObj, -walk * imgWidth, function() {
					flag = true;
				});

				//判断当前如果是最后一张照片,则第一个小圆点显示背景颜色,否则正常显示

				//排他功能,移除所有小圆点的背景颜色
				for (var i = 0; i < olObj.children.length; i++) {
					olObj.children[i].removeAttribute("class");
				}
				//当前小圆点显示颜色
				olObj.children[walk].className = "current";
			}

		};
		//6).设置自动播放功能


		var timer = setInterval(clickManage, 1500);
		
		//设置任意元素移动到指定距离
		
		function animate(element, target, fn) {
			//每次调用函数,先清理定时器
			clearInterval(element.timeId);
			//把定时器的id值储存到元素属性当中
			element.timeId = setInterval(function() {
				// 获取元素当前的位置
				var current = element.offsetLeft;
				//每次移动的距离
				var step = 10;
				step = current > target ? -step : step;
				// 判断当前位置距离目标位置的距离是不是大于每次移动的距离
				if (Math.abs(current - target) > Math.abs(step)) {
					element.style.left = current + step + "px";
		
				} else {
					// 如果小于每次需要移动的距离,则清理定时器,立即到达目标位置
					// 清理定时器
					clearInterval(element.timeId);
					//直接到达目标
					element.style.left = target + "px";
					if (fn) {
						fn();
					}
				}
		
			}, 1)
		}