Javascript实现的选择图片效果

110 阅读 0 评论 73 点赞

我是靠谱客的博主无心手套，这篇文章主要介绍Javascript实现的选择图片效果，现在分享给大家，希望可以做个参考。

有时间的话，每天写一点儿代码，不然真的会生疏的。

我只想说，JS神奇的语法让我汗颜！我今天谢了一个JS的图片选择器，很简单，学的本来就不难。

先看看代码吧。。。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Image</title>
	<script type="text/javascript">
                //提前加载的图片，这个有预缓存的功效，可以在页面加载之前，缓存好页面，建立的html文件下，同路径有个Images文件夹，
                //里面有图片，如果喜欢我把图片放出来吧
                var imgList = new Array();
		imgList["img1"] = new Image(400,400);
		imgList["img1"].src="Images/facebook.png";
		imgList["img2"] = new Image(400,400);
		imgList["img2"].src="Images/rss.png";
		imgList["img3"] = new Image(400,400);
		imgList["img3"].src="Images/skype.png";
		imgList["img4"] = new Image(400,400);
		imgList["img4"].src="Images/forrst.png";
		function loadImg(list){
			var img = list.options[list.selectedIndex].value;
			document.thumbnail.src = imgList[img].src;
		}
	</script>
</head>
<body>
	<h2>image as follows :</h2>
	<img src="Images/xielunyan.png" height="200" width="200" name="thumbnail">
	<form name="images_form">//表单，里面有对应的option，通过绑定onchange监听更改时间的发生，当选项更改时可以更换图片
	<select name="images_sele" οnchange="loadImg(this)">
			<option value="img1">facebook</option>
			<option value="img2">rss</option>
			<option value="img3">skype</option>
			<option value="img4">forrst</option>
		</select>
	</form>

</body>
</html>

效果吗，就是更换图片，这里就是学了一下，onchange相应时间，提前缓存好图片，通过new出来的Image，之后在函数中更换图片就可以了。

下面是我的图片