javascript制作幻灯片切换效果

最新推荐文章于 2022-05-18 20:15:45 发布

不问匆匆

最新推荐文章于 2022-05-18 20:15:45 发布

阅读量1k

点赞数

分类专栏：新手文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_44830974/article/details/90051065

版权

新手专栏收录该内容

40 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#box{
			width: 180px;
			height: 390px;
			margin: auto;
			background-color: blue;
			border: 2px soild yellow;
		}
	</style>
</head>
<body>
	<div id="box">
		<img src="images/品牌4.png" id="pho">
	</div>
 	
 	<script type="text/javascript">
 		/*
			幻灯片：假设有4张图片，每个2秒切换一次
		*/

		var pho=document.getElementById('pho');
		//遍历图片，
		function change(n){
			if (n>11) {
				n=8;
			}
			pho.src='images/'+n+'.png';
			n++;
			setTimeout(change,2000,n);
		}

		change(8);
 	</script>
</body>
</html>