在网页中实现图片的轮播

77 阅读 0 评论 51 点赞

我是靠谱客的博主怡然信封，最近开发中收集的这篇文章主要介绍在网页中实现图片的轮播，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

我们在浏览网页时，会经常看到有很多图片每隔一段时间就会变一张图片，那么这种效果应该怎么来实现呢？

为简化代码，将几张图片分别命名为0.jpg, 1.jpg, 2.jpg。实现方式如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<img />
		<script>
			var index = 0;
			
			/*
			 * 在image标签中插入路径为path的图片
			 */
			function image(path){
				return document.getElementsByTagName("img")[0].src=path;
			}
			
			/*
			 * 在次数不同时设置不同的图片
			 */
			function getImage(){
				index=index%3;
				image("./img/"+index+".jpg");
				index++;
			}
			
			/*
			 * 播放图片，一秒钟变换一次
			 */
			function change(){
				setInterval("getImage()",1000);
			}
			
			/**
			 * 先调用一次，否则会有一秒钟的空白
			 */
			getImage();
			
			/**
			 * 调用方法
			 */
			change();
		</script>
	</body>
</html>