操作DOM实现轮播图

╰半夏微凉° 2021-09-15 11:24 279阅读 0赞

一、思路分析

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>