点图片上一页下一页翻页效果

时间:2021-05-18

<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>

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章