操作DOM实现轮播图

一、思路分析

1.创建一个img标签,而后再创建一个img标签

2.移动图片

3.移除移动出来的左边的一张.

4.而后接着创建,移动,删除,循环往复.

二、代码实现

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>02DOM版轮播</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		#window {
			width: 640px;
			height: 400px;
			border: 2px solid gold;
			margin: 100px auto;
			overflow: hidden;
			position: relative;
		}

		/*采用DOM方式的轮播图,需要几张图片的宽度?2张*/

		#content {
			position: absolute;
			width: 1280px;
			height: 400px;
			font-size: 0;
		}

		#content>img {
			width: 640px;
		}
	</style>
</head>

<body>
	<div id="window">
		<div id="content"></div>
	</div>
</body>

</html>
<script type="text/javascript">
	var contDiv = document.getElementById("content");
	var currentIndex = 1;
	//声明一个创建img的函数
	function createImg() {
		//创建img
		var imgM = document.createElement("img");
		//设置img标签的src属性
		imgM.src = "img/BreakingBad" + currentIndex + ".jpg";
		//添加给conDiv
		contDiv.appendChild(imgM);
	}
	//定义函数删除图片img
	function removeImg() {
		var imgs = document.querySelectorAll("#content img");
		//总是删除第一张图片
		contDiv.removeChild(imgs[0]);
	}
	//调用一次创建图片函数
	createImg();

	var timer1;
	clearInterval(timer1);
	timer1 = setInterval(function () {
		createImg();
		//记录当前步数
		var t = 0;
		//开始偏移位置
		var b = 0;
		//总的偏移量
		var c = -640;
		//总的步数
		var d = 30;

		var timer2;
		clearInterval(timer2);
		timer2 = setInterval(function () {
			currentIndex++;
			//在图片轮回结束时,自动跳转到第一张图片.
			if (currentIndex > 7) {
				currentIndex = 1;
			}
			t++;
			contDiv.style.left = b + c / d * t + "px";
			if (t >= d) {
				//图片切换完毕,清除计时器.
				clearInterval(timer2);
				//删除切换出去的img
				removeImg();
				//重新进行循环
				contDiv.style.left = 0;
			}
		}, 30);
	}, 2000);
</script>

操作DOM实现轮播图

猜你喜欢