點(diǎn)圖片上一頁(yè)下一頁(yè)翻頁(yè)效果
更新時(shí)間:2008年07月09日 23:13:03 作者:
實(shí)現(xiàn)圖片翻頁(yè)效果實(shí)例代碼
<script language="javascript" defer>
var zhang=2
function next(){
if(zhang==7){
alert("這已經(jīng)是最后一張了!")
zhang=6
}
document.getElementById("tu").src=zhang+".jpg"
text.innerHTML="當(dāng)前是第"+zhang+"張圖片"
zhang++
}
function up(){
if(zhang==2){
alert("這已經(jīng)是第一張了!")
zhang=3
}
document.getElementById("tu").src=(zhang-2)+".jpg"
text.innerHTML="當(dāng)前是第"+(zhang-2)+"張圖片"
zhang--
}
</script>
<style type="text/css">
#divall {
position:relative;
}
#divleft {
border:1px red solid;
border-right:0px red solid;
background: url(bg.gif);
cursor:url("2.cur");
position:absolute;
top:0px;
z-index:2007;
text-align:right;
padding:0px
}
#divright {
border:1px red solid;
border-left:0px red solid;
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>
<div id="text" >當(dāng)前是第1張圖片</div>
<div id="divall">
<img src="1.jpg" id="tu">
<div id="divleft" title="上一張" onmouseover="show_div('divleft','left.gif')" onmouseout="hide_div('divleft')" onclick="up()">
</div>
<div id="divright" title="下一張" onmouseover="show_div('divright','right.gif')" onmouseout="hide_div('divright')" onclick="next()">
</div>
</div>
<script>//
var w=document.getElementById("tu").width//500
var h=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>")
function show_div(id,img){
document.getElementById(id).innerHTML="<img src="+img+">"
}
function hide_div(id){
document.getElementById(id).innerHTML=""
}
</script>
var zhang=2
function next(){
if(zhang==7){
alert("這已經(jīng)是最后一張了!")
zhang=6
}
document.getElementById("tu").src=zhang+".jpg"
text.innerHTML="當(dāng)前是第"+zhang+"張圖片"
zhang++
}
function up(){
if(zhang==2){
alert("這已經(jīng)是第一張了!")
zhang=3
}
document.getElementById("tu").src=(zhang-2)+".jpg"
text.innerHTML="當(dāng)前是第"+(zhang-2)+"張圖片"
zhang--
}
</script>
<style type="text/css">
#divall {
position:relative;
}
#divleft {
border:1px red solid;
border-right:0px red solid;
background: url(bg.gif);
cursor:url("2.cur");
position:absolute;
top:0px;
z-index:2007;
text-align:right;
padding:0px
}
#divright {
border:1px red solid;
border-left:0px red solid;
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>
<div id="text" >當(dāng)前是第1張圖片</div>
<div id="divall">
<img src="1.jpg" id="tu">
<div id="divleft" title="上一張" onmouseover="show_div('divleft','left.gif')" onmouseout="hide_div('divleft')" onclick="up()">
</div>
<div id="divright" title="下一張" onmouseover="show_div('divright','right.gif')" onmouseout="hide_div('divright')" onclick="next()">
</div>
</div>
<script>//
var w=document.getElementById("tu").width//500
var h=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>")
function show_div(id,img){
document.getElementById(id).innerHTML="<img src="+img+">"
}
function hide_div(id){
document.getElementById(id).innerHTML=""
}
</script>
您可能感興趣的文章:
- php中文本數(shù)據(jù)翻頁(yè)(留言本翻頁(yè))
- 如何編寫(xiě)翻頁(yè)函數(shù)?
- PHP 翻頁(yè) 實(shí)例代碼
- PHP 長(zhǎng)文章分頁(yè)函數(shù) 帶使用方法,不會(huì)分割段落,翻頁(yè)在底部
- php實(shí)現(xiàn)的仿阿里巴巴實(shí)現(xiàn)同類(lèi)產(chǎn)品翻頁(yè)
- 在圖片上顯示左右箭頭類(lèi)似翻頁(yè)的代碼
- 解析Android中實(shí)現(xiàn)滑動(dòng)翻頁(yè)之ViewFlipper的使用詳解
- 通過(guò)MySQL優(yōu)化Discuz!的熱帖翻頁(yè)的技巧
- PHP翻頁(yè)跳轉(zhuǎn)功能實(shí)現(xiàn)方法
- MongoDB快速翻頁(yè)的方法
相關(guān)文章
來(lái)自ImageSee官方 JavaScript圖片瀏覽器
2008-01-01ie8.0下顯示本地圖片的js實(shí)現(xiàn)代碼 img.src
ie8.0下顯示本地圖片的js實(shí)現(xiàn)代碼,IE8.0 顯示本地圖片 img.src=本地圖片路徑 是無(wú)效,只能通過(guò)div來(lái)完成2012-03-03JavaScript 類(lèi)似flash效果的立體圖片瀏覽器
這是一款比較有立體感的圖片瀏覽器,通過(guò)圖層定位技術(shù)z-index讓瀏覽器正在查看的圖片突顯出來(lái),并讓兩邊的圖片呈現(xiàn)半透明狀態(tài)。很個(gè)性化哦!2010-02-02鼠標(biāo)移動(dòng)到一張圖片時(shí)變?yōu)榱硪粡垐D片
鼠標(biāo)移動(dòng)到一張圖片時(shí)變?yōu)榱硪粡垐D片...2006-12-12