自学JS之切换图片进阶篇章

最新推荐文章于 2017-01-11 22:24:27 发布

cookielv

最新推荐文章于 2017-01-11 22:24:27 发布

阅读量390

点赞数

分类专栏：自学第一课

本文链接：https://blog.csdn.net/qq_19004625/article/details/53415698

版权

自学第一课专栏收录该内容

11 篇文章 0 订阅

订阅专栏

今天要展示的是平时在网页上面看到的如何切换图片：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片切换小示例</title>
		<style>
			#box{
				width:1000px;
				height:1000px;
				margin:50px auto 0;
				position:relative;
			}
			a { 
				width:80px; height:840px; 
				background:gainsboro; 
				filter:alpha(opacity:80); opacity:0.8; 
				position:absolute; 
				top:160px; font-size:58px; 
				color:#000; text-align:center; 
				line-height:840px; 
				text-decoration:none; 
				}
           a:hover { 
           	filter:alpha(opacity:30); opacity:0.3; 
           	}
           #prev { left:10px; }
           #next { right:10px; }
           #img1 { width:800px; height:800px; padding: 160px 100px;}

		</style>
	</head>
	<body>
		<div id="box">
			<a id="prev" href="javascript:;"><</a>
			<a id="next" href="javascript:;">></a>
			<img id="img1" src="img/001.jpg"/>
		</div>
		<script>
		var oPrev = document.getElementById('prev');
	    var oNext = document.getElementById('next');
        var oImg = document.getElementById('img1');
        var arrUrl = [ 'img/001.jpg', 'img/002.jpg', 'img/003.jpg', 'img/004.jpg' ,'img/005.jpg'];
        var num = 0;

        oPrev.onclick = function (){
        	if(num>0){
        	num--;
        	oImg.src = arrUrl[num];//利用数组下标动态的查找图片
         }
        }
        oNext.onclick = function (){
        	if(num<arrUrl.length-1){
        	 num++;
        	 oImg.src = arrUrl[num];
         }
        	
        }
		</script>
	</body>
</html>

效果如下：