1，图片轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style>
.scroll{width: 360px; height: 190px; overflow: hidden; margin: 0 auto; position: relative;}
a{
font-size: 14px;
color: #39F;
height: 18px;
width: 20px;
border: 1px solid #39F;
text-decoration: none;
display: block;
float: left;
margin-right:5px;
text-align: center;
background-color: #FFF;
line-height: 20px;
}
a:hover {
font-size: 14px;
font-weight: bold;
color: #FFF;
background-color: #39F;
border: 1px solid #39F;
text-decoration: none;
display: block;
}
#num {
position:absolute;
width:180px;
height:25px;
z-index:2;
left:100px;
top: 13px;
}
</style>
</head>
<body>
<div class="scroll">
<img src="images/1.gif" id="photo"/>
<div id="num">
<a onmouseover="f(1)" href="">1</a>
<a onmouseover="f(2)" href="">2</a>
<a onmouseover="f(3)" href="">3</a>
<a onmouseover="f(4)" href="">4</a>
<a onmouseover="f(5)" href="">5</a>
</div>
</div>
<script type="text/javascript">
function f(i) {
var img;
if(i==1){
img="1.gif";
}else if(i==2){
img="2.gif"
}else if(i==3){
img="3.jpg"
}else if(i==4){
img="4.jpg"
}else {
img="5.gif"
}
var newNode =document.createElement("img");
var oldNode =document.getElementById("photo");
newNode.setAttribute("src","images/"+img);
oldNode.parentNode.replaceChild(newNode,oldNode)
}
</script>
</body>
</html>2.2，单击上传文件按钮就增加一行上传的行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="copy">
<p>
文件路径：<input type="file" >
</p>
</div>
<input type="submit" value="再上传一个文件"onclick="copyNode()">
<script type="text/javascript">
function copyNode() {
var as=document.getElementById("copy").firstChild
var copy1=as.nextElementSibling.cloneNode(true);
document.getElementById("copy").appendChild(copy1)
}
</script>
</body>
</html>3，当鼠标放在标题上，标题背景变换，并且标题对应相应内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图书周排行榜</title>
<style>
.div1{background: url("images/bg.jpg")no-repeat;width: 169px;height:
290px;margin: 0px auto}
#span {text-align: center;}
ul,li{list-style-type: none;display: inline-block;padding: 5px;
font-size: 12px; cursor:pointer;color: #FFFFFF}
li{ background: url("images/menu1.gif") center no-repeat; height:23px;
width:38px;text-align: center;line-height: 23px;margin-left: 8px;
margin-top:25px; }
li:nth-of-type(2){margin-left:-2px}
li:nth-of-type(3){margin-left: -3px}
li.tp2:hover{background: url("images/menu2.gif")no-repeat}
a{text-decoration: none;font-size: 12px;line-height:26px;position:
relative;left: 15px;top: -35px;}
a:hover{color: crimson}
#book2,#book3{display: none}
</style>
</head>
<body>
<div class="div1">
<p id="span">
<ul>
<li id="bg1"onmouseover="a(1)">小说</li>
<li id="bg2"onmouseover="a(2)">非小说</li>
<li id="bg3"onmouseover="a(3)">少儿</li>
</ul>
</p>
<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 a(i) {
var ul1=document.getElementById("book1");
var ul2=document.getElementById("book2");
var ul3=document.getElementById("book3");
if(i==1){
ul1.style.display="block";
ul2.style.display="none";
ul3.style.display="none";
}else if(i==2){
ul1.style.display="none";
ul2.style.display="block";
ul3.style.display="none";
}else{
ul1.style.display="none";
ul2.style.display="none";
ul3.style.display="block";
}
var a=document.getElementById("bg1");
a.className='tp2';
var aa=document.getElementById("bg2");
aa.className='tp2';
var aaa=document.getElementById("bg3");
aaa.className='tp2';
}
</script>
</body>
</html>