Web前端第三季(JavaScript):十八:第6章:图片轮播和广告弹窗案例:601-设置图片更换+602-设置图片的循环更换+603-添加上一张和下一张的按钮-CSDN博客

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style type="text/css">
			//div设置样式
			div {
				width: 900px;
				height: 500px;
				margin: 0 auto;
			}

			//img设置样式
			div img {
				width: 500px;
				height: 400px;
			}
		</style>

		<script type="text/javascript">
			//定时器执行动作
			window.setTimeout(changeImg, 2000);

			//更改图片
			function changeImg() {
				var my_img = document.getElementById("my_img");
				my_img.src = "./img/海绵宝宝-2.jpeg";
			}
		</script>
	</head>
	<body>
		<div>
			<img src="img/海绵宝宝-1.jpeg" id="my_img">
		</div>
	</body>
</html>

操作:2:成功:602-设置图片的循环更换

1.运行结果:成功:

1，怎么自动调用某个函数（自动轮播）
setInterval(functionName,millisec);

2，当网页加载完成的时候，设置计时调用
onload
为什么要等网页加载完成？
只有网页加载完成了，才可以访问网页上的任何元素！

3，两种控制图片路径的方式
数组
设置固定规范的图片名称

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style type="text/css">
			//div设置样式
			div {
				width: 900px;
				height: 500px;
				margin: 0 auto;
			}

			//img设置样式
			div img {
				width: 500px;
				height: 400px;
			}
		</style>

		<script type="text/javascript">
			// 初始化:避免未加载完毕，执行动作产生问题，
			function init() {
				//1.定时器:执行动作:只会执行一次
				// window.setTimeout(changeImg, 2000);
				
				// 2.定时器：重复做事情
				window.setInterval(changeImg,1000);
			}

			//更改图片
			var img_index=1;
			function changeImg() {
				var my_img = document.getElementById("my_img");
				img_index++;
				// my_img.src = "./img/海绵宝宝-2.jpeg";
				if(img_index>2)
				{
					img_index=1;
				}
				my_img.src = "./img/海绵宝宝-"+img_index+".jpeg";
			}
		</script>
	</head>
	<body onload="init()">
		<div>
			<img src="img/海绵宝宝-1.jpeg" id="my_img">
		</div>
	</body>
</html>

操作:3:成功:603-添加上一张和下一张的按钮

1.运行结果:成功:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style type="text/css">
			//div设置样式
			div {
				width: 900px;
				height: 500px;
				margin: 0 auto;
			}

			//img设置样式
			div img {
				width: 900px;
				height: 500px;
			}
		</style>

		<script type="text/javascript">
			// 初始化:避免未加载完毕，执行动作产生问题，
			function init() {
				//1.定时器:执行动作:只会执行一次
				// window.setTimeout(changeImg, 2000);

				// 2.定时器：重复做事情
				window.setInterval(changeImg, 2000);
			}

			//更改图片
			var img_index = 1;

			function changeImg() {
				nextImg();
			}

			//点击上一张
			function preImg() {
				var my_img = document.getElementById("my_img");
				img_index--;
				if (img_index < 1) {
					img_index = 2;
				}
				my_img.src = "./img/海绵宝宝-" + img_index + ".jpeg";
			}

			//点击下一张图片按钮
			function nextImg() {
				var my_img = document.getElementById("my_img");
				img_index++;
				if (img_index > 2) {
					img_index = 1;
				}
				my_img.src = "./img/海绵宝宝-" + img_index + ".jpeg";
			}
		</script>
	</head>
	<body onload="init()">
		<p align="center">
			<button type="button" onclick="preImg()">上一张</button>
			<button type="button" onclick="nextImg()">下一张</button>
		</p>
		<div>
			<img src="img/海绵宝宝-1.jpeg" id="my_img">
		</div>
	</body>
</html>