html+js实现轮播图切换效果百度网盘提取..拥有更多的html文章基础体会其中的乐趣吧~https://pan.ba

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<title>图片自动轮播</title>
	<!-- 
		1. 确定事件 : 文档加载完成的事件onload	
		2. 事件要触发 : init()
		3. 函数里面要做的一些事情  
				通常会去操作元素,提供交互
				1. 开启定时器:执行切换图片的函数 changeIMG
		4. changeIMG()
				获得要切换的图片的元素
	 -->
		<script>
			var index=0;
			function changeIMG () {
				// body...  获得切换图片的元素
				var img=document.getElementById('img1');

				//计算出当前要切换到第几张图片
				var curIndex=index%3+1;//0.1.2

				img.src="img/love"+curIndex+".jpg";
			
				index=index+1;

				if(index>curIndex){
					index=1;
				}

				document.getElementById('page').innerHTML='第'+index+'页'
				
			}

			function init() {
				setInterval('changeIMG ()',3000);
			}
		</script>
	</head>
	<body onload="init()">
		<img src="img/love1.jpg" width="1000px;" height="1000px;" id="img1">
		<p id='page'></p>
	</body>
<style type="text/css">
body{
	width: 100%;
}
p{
	text-align: center;
}
img{
	margin:0 auto;
}	
</style>

</html>

百度网盘提取..拥有更多的html文章基础
体会其中的乐趣吧~ pan.baidu.com/s/1-ExPhMqj… 7amb