1.单击不同的数字链接显示不同的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮换</title>
<link type="text/css" rel="stylesheet" href="作业3：显示不同的图片/css/scroll.css"/>
</head>
<body>
<div><img src="imgs/1.gif" id="fangzhi" ></div>
<a href="#" onclick="shuzi(1)">1</a>
<a href="#" onclick="shuzi(2)">2</a>
<a href="#" onclick="shuzi(3)">3</a>
<a href="#" onclick="shuzi(4)">4</a>
<a href="#" onclick="shuzi(5)">5</a>
<script>
function shuzi(num) {
switch (num){
case 1:
var div =document.getElementById("fangzhi");
div.setAttribute("src","imgs/1.gif");
break;
case 2:
var div =document.getElementById("fangzhi");
div.setAttribute("src","imgs/2.gif");
break;
case 3:
var div =document.getElementById("fangzhi");
div.setAttribute("src","imgs/3.jpg");
break;
case 4:
var div =document.getElementById("fangzhi");
div.setAttribute("src","imgs/4.jpg");
break;
case 5:
var div =document.getElementById("fangzhi");
div.setAttribute("src","imgs/5.gif");
break;
}
}
</script>
</body>
</html>2.单击再上传一个文件按钮就增加一行，可怎加许多相同的文件上传的行
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>上传文件</title>
<style>
#main{margin:0 auto; width: 500px;}
dl{clear: both; width: 100%;}
dt{
float: left;
width: 100px;
text-align: right;
}
</style>
</head>
<body>
<div id="main">
<dl id="upload">
<dt>文件路径：</dt>
<dd><input name="fileImages" type="file" /></dd>
</dl>
<div id="addBtn"><input id="up" type="button" value="再上传一个文件" onclick="addInput()"/></div>
</div>
<script>
function addInput() {
var dl = document.createElement("dl");
var dt = document.createElement("dt");
var dd = document.createElement("dd");
var input = document.createElement("input");
dl.appendChild(dt);
dl.appendChild(dd);
dd.appendChild(input);
dt.innerHTML="文件路径："
input.setAttribute("type","file");
document.getElementById("main").insertBefore(dl,document.getElementById("addBtn"));
}
</script>
</body>
</html>3.当鼠标指针放在小说非小说或少儿上时，标题背景改备为另外一个图片，鼠标指针变为手状，并且下面的图书标题变为对应类别下的标题
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>TAB切换</title>
<link href="css/tab.css" rel="stylesheet">
<style>
ul li{
background:url("images/menu1.gif")no-repeat;
width: 47px;
text-align: center;
}
#book1{display: block}
#book2{display: none}
#book3{display: none}
.li:hover{
background: url("images/menu2.gif")no-repeat;
}
</style>
</head>
<body>
<div class="div_bg">
<ul>
<li id="bg1" onmouseover="change(1)"><a class="white">小说</a></li>
<li id="bg2" onmouseover="change(2)"><a class="white">非小说</a></li>
<li id="bg3" onmouseover="change(3)"><a class="white">少儿</a></li>
</ul>
<div id="book1">
<a href="#" target=_blank>1.时间旅行者的妻子</a><br>
<a href="#" target=_blank>2.女心理师（下）</a><br>
<a href="#" target=_blank>3.鬼吹灯之精绝古城</a><br>
<a href="#" target=_blank>4.女心理师（上）</a><br>
<a href="#" target=_blank>5.小时候</a><br>
<a href="#" target=_blank>6.追风筝的人</a><br>
<a href="#" target=_blank>7.盗墓笔记2</a><br>
<a href="#" target=_blank>8.输赢</a>
</div>
<div id="book2">
<a href="#" target=_blank>1.人生若只如初见</a><br>
<a href="#" target=_blank>2.高效能人士的七个..</a><br>
<a href="#" target=_blank>3.求医不如求己</a><br>
<a href="#" target=_blank>4.人体使用手册</a><br>
<a href="#" target=_blank>5.孩子，把你的手给我</a><br>
<a href="#" target=_blank>6.别笑！我是英文单词书</a><br>
<a href="#" target=_blank>7.人体经络使用手册</a><br>
<a href="#" target=_blank>8.股市稳赚</a>
</div>
<div id="book3">
<a href="#" target=_blank>1.斯凯瑞金色童书・..</a><br>
<a href="#" target=_blank>2.哈利・波特与“混..</a><br>
<a href="#" target=_blank>3.不一样的卡梅拉（..</a><br>
<a href="#" target=_blank>4.它们是怎么来的</a><br>
<a href="#" target=_blank>5.五・三班的坏小子..</a><br>
<a href="#" target=_blank>6.男生日记</a><br>
<a href="#" target=_blank>7.哈利・波特与魔法石</a><br>
<a href="#" target=_blank>8.噼里啪啦丛书(全7册)</a>
</div>
</div>
<script>
function change(num) {
var div1 = document.getElementById("book1");
var div2 = document.getElementById("book2");
var div3 = document.getElementById("book3");
document.getElementById("bg1").className="li";
document.getElementById("bg2").className="li";
document.getElementById("bg3").className="li";
switch (num){
case 1:
div1.style.display="block";
div2.style.display="none";
div3.style.display="none";
break;
case 2:
div1.style.display="none";
div2.style.display="block";
div3.style.display="none";
break;
case 3:
div1.style.display="none";
div2.style.display="none";
div3.style.display="block";
break;
}
}
</script>
</body>
</html>