JavaScript实现的图片依次循环播放

作者:cighao
来源:CSDN
原文:https://blog.csdn.net/cighao/article/details/49338903

<html>
	<head>
		<title>Banner Cycler</title>
		<script>
			var banners = ["1.jpg","2.jpg","3.jpg"]; // 图片地址
			var counter = 0;
			function run(){
				setInterval(cycle,1000);  //重复运行cycle函数,周期1000ms
			}
			function cycle(){
				counter++;
				if(counter == banners.length)	
					counter = 0;
				document.getElementById("banner").src = banners[counter];
			}
		</script>
	</head>
	<body onload = "run();">
		
		<img id="banner" alt="banner" src="1.jpg">
		
	</body>
</html>

setInterval(cycle,1000);作用:每隔1s运行一次cycle函数
counter作用:控制图片下标,每当counter=3的时候,就让它为0
通过依次循环改变img的src属性实现图片的依次循环播放

展开阅读全文

没有更多推荐了,返回首页