1.图片切换
< a href="#" style=“margin: 10px;display: block” “fn()”>切换
< img src=“jd1.jpg” width=“400” alt="" id=“image”>
var a=document.getElementsByTagName("a")[0];
var img=document.getElementById("image");
function fn() {
img.src="jd2.jpg";
return false;
}
2.显示隐藏盒子
<meta charset="UTF-8">
<title>Title</title>
<style>
button{
margin: 10px;
}
div{
width:200px;
height:200px;
background-color: pink;
}
.show{
display: block;
}
.hide{
display: none;
}
</style>
< button id=“btn” “fn1()”>隐藏
< div >冰冻三尺非一日之寒
//点击button按钮隐藏盒子,改变文字,再点击显示盒子文字
var btn=document.getElementById("btn");
var div=document.getElementsByTagName("div")[0];
function fn1() {
if(btn.innerHTML==="隐藏")
{
div.className="hide";
btn.innerHTML="显示";
}
else{
div.className="show";
btn.innerHTML="隐藏";
}
}
3.相册轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
ul li{
display: inline-block;
list-style: none;
}
</style>
<body>
<h2>画廊</h2>
<ul id="imuil">
<li>
<a href="jd1.jpg" title="A">
<img src="jd1.jpg" width="100" alt="1">
</a>
</li>
<li>
<a href="jd2.jpg" title="B">
<img src="jd2.jpg" width="100" alt="2">
</a>
</li>
<li>
<a href="2.jpg" title="C">
<img src="2.jpg" width="100" alt="3">
</a>
</li>
<li>
<a href="4.jpg" title="D">
<img src="4.jpg" width="100" alt="4">
</a>
</li>
</ul>
<div style="clear: both;"></div>
<img id="image" src="jd1.jpg" width="450px">
<p id="des">选择一个图片</p>
<script>
var ul=document.getElementById("imuil");
var aArr=ul.getElementsByTagName("a");
var img=document.getElementById("image");
var des=document.getElementById("des");
for(var i=0;i<aArr.length;i++){
aArr[i].function () {
//this指的是函数的调用者,和i无关系
img.src=this.href;
des.innerHTML=this.title;
return false;
}
}
</script>
</body>
</html>