一、点击切换按钮切换图片
设置一个开关变量onoff,点击按钮一次改变onoff的值
img.src=”图片路径”;可以显示一张图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<img src="img/1.png" id="img1" width="400" height="500">
<input type="button" value="切换" id="btn">
<script>
var oImg=document.getElementById("img1");
var oBtn=document.getElementById("btn");
var onOff=1;
oBtn.onclick=function(){
if(onOff==1){
oImg.src="img/1.png";
onOff=2;
}
else if(onOff==2){
oImg.src="img/2.png";
onOff=3;
}
else if(onOff==3){
oImg.src="img/3.png";
onOff=4;
}
else{
oImg.src="img/4.png";
onOff="1";
}
}
</script>
</body>
</html>
2、切换图片(四张图片四个按钮)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.nav{position:absolute;width:400px;height:500px;top:50%;left:50%;margin-left:-200px;margin-top:-250px;}
#div1{margin-top:30px;margin-left:120px;}
</style>
</head>
<body>
<div class="nav">
<img src="img/1.png" id="img1" width="400" height="500">
<div id="div1">
<input type="button" value="1" id="btn1">
<input type="button" value="2" id="btn2">
<input type="button" value="3" id="btn3">
<input type="button" value="4" id="btn4">
</div>
</div>
<script>
var oImg=document.getElementById("img1");
var oDiv=document.getElementById("div1");
var aBtn=oDiv.getElementsByTagName("input");
var pic_src=["img/1.png","img/2.png","img/3.png","img/4.png"];
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].onclick=function(){
var n=this.index;
oImg.src=pic_src[n];
}
}
</script>
</body>
3、图片切换(两个按钮:上一张和下一张)
ps: 1、当事件前是单个变量时,不要用for循环,而是通过变量的变换动态改变for循环用于事件前是一个数组(或类数组),要取出数组中的某个单独的元素时。
2、符号切记加”
如本题的‘/ ’而不是直接/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#p1,#p2{background-color:#ccc; line-height:30px; font-size:20px; color:#fff; margin:0; width:100%; text-align:center; opacity:0.6;}
.box{position:relative; width:400px;margin:0 auto;}
#p1{position:absolute; top:0; left:0;}
#p2{position:absolute; bottom:0; left:0;}
.div1{position:absolute; bottom:80px; left:600px;}
</style>
</head>
<body>
<div class="div1">
<input type="button" value="上一张" id="btn1">
<input type="button" value="下一张" id="btn2">
</div>
<div class="box">
<img src="img/1.png" id="img1" width="400" height="500">
<p id="p1"></p>
<p id="p2"></p>
</div>
<script>
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var oImg=document.getElementById("img1");
var oP1=document.getElementById("p1");
var oP2=document.getElementById("p2");
var arr_pic=["img/1.png","img/2.png","img/3.png","img/4.png"];
var arr_p2= ['老鹰','魔女','精灵','钢铁侠'];
var i=0;
oP1.innerHTML=(i+1)+'/'+arr_pic.length;
oP2.innerHTML=arr_p2[i];
oBtn2.onclick=function(){
if(i<arr_pic.length-1){
oImg.src=arr_pic[++i];
oP1.innerHTML=(i+1)+'/'+arr_pic.length;
oP2.innerHTML=arr_p2[i];
}
else{
i=0;
oImg.src=arr_pic[i];
}
}
oBtn1.onclick=function(){
if(i>0){
oImg.src=arr_pic[--i];
oP1.innerHTML=(i+1)+'/'+arr_pic.length;
oP2.innerHTML=arr_p2[i];
}
else{
i=arr_pic.length-1;
oImg.src=arr_pic[i];
}
}
</script>
</body>