轮播图

最新推荐文章于 2024-12-23 11:36:10 发布

NewBee.Mu

最新推荐文章于 2024-12-23 11:36:10 发布

阅读量155

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/NewBeeMu/article/details/98169646

前端专栏收录该内容

26 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var i = 1;
			function changeAfter(){
				i++;
				var img = document.getElementById("img");
				img.src = "img/"+i+".jpg";
				if(i==5){
					i = 0;
				}
			}
			/* 当页面全部加载完毕之后,开启定时器  加载时间*/
			window.onload=function(){
				/* 设置定时器 */
				window.setInterval(show,2000);
				
			} 
			
			function show(){				
				i++;
				var img = document.getElementById("img");
				img.src = "img/"+i+".jpg";
				/* 判断 是否循环到最后一张图片 重新开始循环 */
				if(i==5){
					i=0;
				}
				
			}
			/* function changeBefore(){
				if(i==1||i==0){
					i = 5;
				}else{
					i--;
				}			
				var img = document.getElementById("img");
				img.src = "img/"+i+".jpg";
	
			} */
		</script>
	</head>
	<body>
		<center>
			<img src="img/1.jpg" id="img"/><br/>
			<input type="button" onclick="changeBefore()" value="上一张"/>&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="button" onclick="changeAfter()" value="下一张"/>
			
		</center>
	</body>
</html>