css部分代码：
<styletype="text/css">
*{
margin:0;
padding:0;
}
#a{
margin:50pxauto;
width:500px;
padding:15px;
text-align:center;
background-color:#99FF99;
}
</style>
js代码：
<script>
window.onload=function(){
varbtn1=document.getElementById("btn1");
varbtn2=document.getElementById("btn2");
varimg=document.getElementsByTagName("img")[0];
//构建一个数组存图片
varimgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
varindex=0;
//console.log(src);
varp=document.getElementById("b");
btn1.onclick=function(){
//alert("1");
//img.src="img/2.jpg"
index--;
if(index<0){
index=imgArr.length-1
}
img.src=imgArr[index]
p.innerHTML="共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
};
btn2.onclick=function(){
//alert("2");
index++;
if(index>4){
index=0;
}
img.src=imgArr[index]
p.innerHTML="共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
};
};
</script>
body部分：
<body>
<divid="a">
<imgsrc="img/1.jpg"alt="雪糕"/>
<buttonid="btn1">上一张</button>
<buttonid="btn2">下一张</button>
<pid="b">共5张图片，当前第1张</p>
</div>
</body>
|
Copyright©2000-2022