web前端之每天学一点js知识
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端之每天学一点js知识相关的知识，希望对你有一定的参考价值。
之前由于本汪的粗心，造成第一期的代码缺失，很抱歉啦对大家，在这里我将代码完整发布出来
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
#btn{margin-top:200px;}
p{margin:0; text-align:center; color:#000; background-color:rgba(255,255,255,0.4); width:490px}
#pic{position:relative; width:490px; height:170px;}
p:nth-of-type(1){ position:absolute; top:0; left:0;}
p:nth-of-type(2){ position:absolute; bottom:0; left:0;}
input.active{background-color:yellow; color:red;}
</style>
</head>
<body>
<div id="btn"></div>
<div id="pic">
<p></p>
<img src="" width="490" height="170"/>
<p></p>
</div>
<script>
var arr1 = ["图1","图2","图3","图4"];
var arr2 = ["img/201512181051305.jpg","img/201512181051307.jpg","img/201512181051308.jpg","img/201512181051309.jpg"];
var oDiv = document.getElementById("btn");
var aP = document.getElementsByTagName("p");
var oImg = document.getElementsByTagName("img")[0];
aP[0].innerHTML = "1/"+arr2.length;
aP[1].innerHTML = arr1[0];
oImg.src = arr2[0];
var str = "";
for(var i=0;i<arr2.length;i++){
str += "<input type=‘button‘ value=‘"+(i+1)+"‘/>";
}
oDiv.innerHTML = str;
var aBtn = oDiv.getElementsByTagName("input");
aBtn[0].className = "active";
for(var i=0;i<arr2.length;i++){
aBtn[i].index = i;
aBtn[i].onclick = function (){
aP[0].innerHTML = (this.index+1)+"/"+arr2.length;
aP[1].innerHTML = arr1[this.index];
oImg.src = arr2[this.index];
for(var j=0;j<arr2.length;j++){
aBtn[j].className = "";
}
this.className = "active";
}
}
</script>
</body>
</html>
以上是关于web前端之每天学一点js知识的主要内容，如果未能解决你的问题，请参考以下文章