网页图片轮播实现-优快云博客

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
				background: #210856;
			}
			img{
				width: 100%;
				height: 100%;
				display: block;
			}
		</style>
		
		<script type="text/javascript">
			window.onload=function(){
				var curIndex  = 0;
				var timeInterval = 50;
				var startIndex = 48;
				var startInterval = 100;
				var timer=null;
				var imgId = document.getElementById("imgId"); 
				var imgArr = [
						"img/1.png",
						"img/2.png",
						"img/3.png",
						"img/4.png",
						"img/5.png",
						"img/6.png",
						"img/7.png",
						"img/8.png",
						"img/9.png",
						"img/10.png",
						"img/11.png",
						"img/12.png",
						"img/13.png",
						"img/14.png",
						"img/15.png",
						"img/16.png",
						"img/17.png",
						"img/18.png",
						"img/19.png",
						"img/20.png",
						"img/21.png",
						"img/22.png",
						"img/23.png",
						"img/24.png",
						"img/25.png",
						"img/26.png",
						"img/27.png",
						"img/28.png",
						"img/29.png",
						"img/30.png",
						"img/31.png",
						"img/32.png",
						"img/33.png",
						"img/34.png",
						"img/35.png",
						"img/36.png",
						"img/37.png",
						"img/38.png",
						"img/39.png",
						"img/40.png",
						"img/41.png",
						"img/42.png",
						"img/43.png",
						"img/44.png",
						"img/45.png",
						"img/46.png",
						"img/47.png",
						"img/48.png",
						"img/49.png",
						"img/50.png",
						"img/51.png",
						"img/52.png",
						"img/53.png",
						"img/54.png",
						"img/55.png",
						"img/56.png",
						"img/57.png",
						"img/58.png",
						"img/59.png",
						"img/60.png",
						"img/61.png",
						"img/62.png",
						"img/63.png",
						"img/64.png",
						"img/65.png",
						"img/66.png",
						"img/67.png",
						"img/68.png"
					];
					
					
				timer = setInterval(startChangeImg,startInterval);
				
				setTimeout(function(){
					clearInterval(timer);
					setInterval(changeImg,timeInterval);
				},(imgArr.length - 48)*startInterval);
				
				function changeImg(){
					if(curIndex == imgArr.length-(imgArr.length -48)-1) { 
						curIndex = 0; 
					}else{ 
						curIndex += 1; 
				    }
					imgId.src = imgArr[curIndex];
				}
				
				function startChangeImg(){
					if(startIndex == imgArr.length-1) { 
						startIndex = 48; 
					}else{ 
						startIndex += 1; 
				    }
					imgId.src = imgArr[startIndex];
				}
			}
		</script>
	</head>
	<body>
		<div><img id="imgId" src="img/49.png" alt="" /></div>
	</body>
</html>
转载于:https://www.cnblogs.com/weiluguo/p/7812993.html