JavaScript实现简易轮播图

JavaScript实现简易轮播图

---

Html代码块：

<div class="container">
	<div class="box">
	<!--Javascript实现轮播图必须要加载第一张图片两次，才能实现无缝衔接好看的效果-->
		<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>

CSS代码：

* {
	margin: 0;
	padding: 0;
}

.container {
	overflow-x: hidden;
}

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

.box img {
	flex: 1;
}

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

JS代码：

<script type="text/javascript">
			var imgList = document.getElementsByTagName("img");//获取所有图片NodeList一个集合
			var imgLength = imgList.length;//拿到集合的长度大小
			var container = document.querySelector(".container");
			var box = document.querySelector(".box");
			var width = 360;//定义一个宽度,原本想直接获取但是发现弹性布局默认会让宽度为浏览器宽度
			var timer;//设置一个全局变量的计时器
			var index = 1;//索引
			container.style.width = width + 'px';//设置容器的宽度
			box.style.width = width * imgLength + 'px';//动态设置盒子的宽度

			function startImg() {
				timer = setInterval(function() {
					if (index <= 5) {
						box.style.left = box.offsetLeft - width + "px";
						box.style.transition = ".4s";
						if(index == 5){
							//当index==5时候这一遍代码都会执行,所以这里单独设置当index==5时候,setTimeOut等待动画结束后触发,从而衔接.
							setTimeout(function(){
							box.style.left = "0px";
							box.style.transition = "0s";
							index = 1;
						},400)}
					}
					index ++;
				}, 3000);
			}
			//为容器设置鼠标移动事件
			container.addEventListener("mousemove",function(){
				if(timer){
					clearInterval(timer);
				}
			})
			//为容器设置鼠标移出事件
			container.addEventListener("mouseleave",function(){
				startImg();
			})
			//默认开始执行函数
			startImg();
		</script>

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