原生js实现简单轮播图效果

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a974986042/article/details/84899625
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<style>
			.father{
				border: 1px solid #FF0000;
				margin: auto;
				width: 500px;
			}
		</style>
		<script>
			var i=1;
			function init(){
				//定时器
				setInterval("changeImg()", 3000);  //参数 1,调用的方法 2.时间
			}
			
			function changeImg(){
				//图片数量
				if(i==3){
					i=0;
				}
				i++;
				document.getElementById("img").src = "../img/"+i+".jpg";
			}
		</script>
	</head>
	<body onload="init()">	
		<div class = "father">
			<!--3.轮播图部分-->
			<div id="">
				<img src="../img/1.jpg" width="100%"  id="img"/>
			</div>
		</div>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/a974986042/article/details/84899625