js实现简单的轮播图效果

window.setInterval(code,millisec)按照指定的周期(间隔)来执行函数或代码段。
参数1:code必须。执行的函数名或者执行的代码段
参数2:millisec必须。间隔时间,即周期。单位毫秒。
window对象提供的都是全局函数,调用函数时可将window省略。

第一步:确定事件(onload)并为其绑定一个函数
第二步:编写事件触发函数
第三步:编写定时任务(setInterval)
第四步:编写定时任务里面的函数
第五步:通过变量的方式,进行循环(获取轮播图的位置,并设置 src 属性)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.images {
			width: 500px;
			height: 500px;
			margin: auto;
			border: 1px solid red;
		}
	</style>
	<script>
		//页面加载完调用init函数
		window.onload = init;
		function init() {
			//启用定时器
			window.setInterval("changImg()",2000);
		}
		var i = 1;
		function changImg() {
			i++;
			document.getElementById("img").src = "images/"+i+".jpg";
			if(i > 24) {
				i = 0;
			}
		}
	</script>
	<body>
		<div class="images">
			<img src="images/1.jpg" id="img">
		</div>
	</body>
</html>


猜你喜欢

转载自blog.csdn.net/qq_43554997/article/details/106388850