前端基础 - HTML定时轮播图片
  TEZNKK3IfmPf 2024年07月26日 24 0
定时轮播图片

效果图(图片一直轮流切换):
前端基础 - HTML定时轮播图片_JQuery

代码:

<!DOCTYPE html>
<html>
	<head>
		
		<meta charset="UTF-8">
		
		<title>轮播图测试</title>
		
		<script>
			
			window.onload = function(){
				window.setInterval(changePic,1000);
			}
			
			var num = 1;
			
			function changePic(){
				++num;
				if(num == 4){
					num = 1;
				}
				var imgElement = document.getElementById("img1");
				imgElement.src = "img/"+num+".jpg";
			}
			
		</script>
		
	</head>
	<body>
		<img id="img1" src="img/1.jpg" width="100%" />
		
	</body>
</html>

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2024年07月26日 0

暂无评论

推荐阅读
  TEZNKK3IfmPf   2024年07月27日   68   0   0 JavaSEhtml
TEZNKK3IfmPf