首先获取元素ID赋值给变量,然后对变量添加点击事件
非数组版:
<script>
/*图片轮番*/
window.onload=function(){
var pre=document.getElementById("pre");
var next=document.getElementById("next");
var pic=document.getElementById("pic");
n=1;
next.onclick=function(){
n=n+1;
if(n>4){
n=4;
}
pic.src='../style/'+n+'.png';
}
pre.onclick=function(){
n--;
if(n<1){
n=1;
}
pic.src='../style/'+n+'.png';
}
}
</script>
<!--banner-->
<div style="width:100%;position:relative;">
<input type="image" style="position:absolute;left:5%;top:40%;" src="../style/btn_left.png"id="pre">
<input type="image" style="position:absolute;left:90%;top:40%;" src="../style/btn_right.png"id="next" >
<img style="width:100%;margin-top:-5px" src="../style/1.png" id="pic"/>
</div>
数组版:
<script type="text/javascript">
window.onload=function(){
var next=document.getElementById("next");
var pre=document.getElementById("pre");
var pic=document.getElementById("pic");
var n=0;
/* save pics' names into array */
var imgArr=['aehdewu','edwej','qedeoi','euqe'];
next.onclick=function(){
n++;
if(n>imgArr.length-1){
n=imgArr.length-1;
}
pic.src='../style/'+imgArr[n]+'.jpg';
}
pre.onclick=function(){
n--;
if(n<0){
n=0;
}
pic.src='../style/'+imgArr[n]+'.jpg';
}
}
</script>
<input type="button" id="pre" value="Last Pic" />
<input type="button" id="next" value="next pic" />
<img src="../style/aehdewu.jpg" id="pic" alt="" />