轮播图

<!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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值