点图片上一页下一页翻页效果_Javascript教程-查字典教程网
点图片上一页下一页翻页效果
点图片上一页下一页翻页效果
发布时间:2016-12-30 来源:查字典编辑
摘要:varzhang=2functionnext(){if(zhang==7){alert("这已经是最后一张了!")zhang=6}docum...

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类