JavaScript实现简易轮播图

JavaScript实现简易轮播图

---

Html代码块：

<div class="container">
	<div class="box">
	
		<img src="img/1.jpg">
		<img src="img/2.jpg">
		<img src="img/3.jpg">
		<img src="img/4.jpg">
		<img src="img/5.jpg">
		<img src="img/1.jpg">
	div>
	
	<div class="intor">
		<ul>
			<li class="active">li>
			<li>li>
			<li>li>
			<li>li>
			<li>li>
		ul>
	div>
div>

CSS代码：

* {
     
	margin: 0;
	padding: 0;
}

			.container {
     
				overflow-x: hidden;
			}

			.box {
     
				height: 260px;
				display: flex;
				left: 0;
				position: relative;
			}

			.box img {
     
				flex: 1;
			}
			.intor ul {
     
				list-style: none;
				display: flex;
				position: absolute;
				height: 12px;
				bottom: 5px;
				left: 50%;
			}

			.intor ul li {
     
				flex: 1;
				border-radius: 6px;
				border: 1px solid #ccc;
				margin-right: 5px;
			}

			.active {
     
				background: white;
			}

我这里使用的是弹性布局，更简洁的将图片排列，不会像float和inline-block一些问题。

JS代码：

<script type="text/javascript">
			var imgList = document.getElementsByTagName("img"); //获取所有图片NodeList一个集合
			var imgLength = imgList.length; //拿到集合的长度大小
			var ul = document.querySelector("ul");
			var li = ul.getElementsByTagName("li"); //获得li长度
			var container = document.querySelector(".container");
			var box = document.querySelector(".box");
			var liLength = li.length; //动态获取li长度
			var width = 360; //定义一个宽度,原本想直接获取但是发现弹性布局默认会让宽度为浏览器宽度
			var timer; //设置一个全局变量的计时器
			var index = 1; //索引
			container.style.width = width + 'px'; //设置容器的宽度
			box.style.width = width * imgLength + 'px'; //动态设置盒子的宽度
			ul.style.width = (ul.offsetHeight + 5) * liLength + "px"; //动态设置ul宽度
			ul.style.marginLeft = -ul.offsetWidth / 2 + "px"; //动态设置ul边缘值
			function startImg() {
     
				timer = setInterval(function() {
     
						box.style.left = box.offsetLeft - width + "px";
						box.style.transition = ".4s";
						if (index == imgLength - 1) {
     
							//当index==imgLength时候这一遍代码都会执行,所以这里单独设置当index==5时候,setTimeOut等待动画结束后触发,从而衔接.
							setTimeout(function() {
     
								box.style.left = "0px";
								box.style.transition = "0s";
								
							}, 400);
							li[index - 1].className = "";
							index = 1;
							li[index - 1].className = "active";
						} else {
     
							li[index].className = "active";
							li[index - 1].className = "";
							index++;
						}
				}, 3000);
			}

			function ScrollBox(i) {
     
				box.style.left = -i * width + "px";
				box.style.transition = ".4s";
				li[index - 1].className = "";
				li[i].className = "active";
				index = i + 1;
			}
			for (let i = 0; i < li.length; i++) {
     
				li[i].onclick = function() {
     
					ScrollBox(i);
				}
			}
			//为容器设置鼠标移动事件
			container.addEventListener("mousemove", function() {
     
				if (timer) {
     
					clearInterval(timer);
				}
			})
			//为容器设置鼠标移出事件
			container.addEventListener("mouseleave", function() {
     
				startImg();
			})
			//默认开始执行函数
			startImg();
		</script>

在宽度动态获取这里做的不够好，如果有小伙伴给我提个意见可好。谢谢大家欣赏！