<scriptlanguage="javascript"defer>
varzhang=2
functionnext(){
if(zhang==7){
alert("这已经是最后一张了!")
zhang=6
}
document.getElementById("tu").src=zhang+".jpg"
text.innerHTML="当前是第"+zhang+"张图片"
zhang++
}
functionup(){
if(zhang==2){
alert("这已经是第一张了!")
zhang=3
}
document.getElementById("tu").src=(zhang-2)+".jpg"
text.innerHTML="当前是第"+(zhang-2)+"张图片"
zhang--
}
</script>
<styletype="text/css">
#divall{
position:relative;
}
#divleft{
border:1pxredsolid;
border-right:0pxredsolid;
background:url(bg.gif);
cursor:url("2.cur");
position:absolute;
top:0px;
z-index:2007;
text-align:right;
padding:0px
}
#divright{
border:1pxredsolid;
border-left:0pxredsolid;
background:url(bg.gif);
cursor:url("1.cur");
top:0px;
position:absolute;
z-index:2007
text-align:center;
padding:0px
}
#tu{z-index:-2007}
</style>
<divid="text">当前是第1张图片</div>
<divid="divall">
<imgsrc="1.jpg"id="tu">
<divid="divleft"title="上一张"onmouseover="show_div('divleft','left.gif')"onmouseout="hide_div('divleft')"onclick="up()">
</div>
<divid="divright"title="下一张"onmouseover="show_div('divright','right.gif')"onmouseout="hide_div('divright')"onclick="next()">
</div>
</div>
<script>//
varw=document.getElementById("tu").width//500
varh=document.getElementById("tu").height//400
document.getElementById("tu").style.width=w
document.getElementById("tu").style.height=h
//document.getElementById("divleft").style.visibility='hidden'
document.getElementById("divleft").style.width=w/2
document.getElementById("divleft").style.height=h
document.getElementById("divleft").style.left=0
//document.getElementById("divright").style.visibility='hidden'
document.getElementById("divright").style.width=w/2
document.getElementById("divright").style.height=h
document.getElementById("divright").style.left=w/2
//document.write("<style>#tu{width:"+w+"px;height:"+h+"px;z-index:2000}</style>")
functionshow_div(id,img){
document.getElementById(id).innerHTML="<imgsrc="+img+">"
}
functionhide_div(id){
document.getElementById(id).innerHTML=""
}
</script>
【点图片上一页下一页翻页效果】相关文章：
★ js输入中文效果
★ 自动设为主页