繁體中文当前位置: 首页 > 实例教程 > 脚本特效 > 动态内容 > 内容前后翻页
动态内容 中的 内容前后翻页
演示效果：
内容1
内容2
| 内容3 |
第一步：在HEAD区域加上入下代码
<style type="text/css">
/*指定内容的高度*/
.multiparts{
height: 50px;
}
</style>
<script type="text/javascript">
if (document.getElementById){
document.write('<style type="text/css">')
document.write('.multiparts, #formnavigation{display:none;}')
document.write('</style>')
}
var curpart=0
function getElementbyClass(classname){
partscollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
partscollect[inc++]=alltags[i]
}
}
function cycleforward(){
partscollect[curpart].style.display="none"
curpart=(curpart<partscollect.length-1)? curpart+1 : 0
partscollect[curpart].style.display="block"
updatenav()
}
function cycleback(){
partscollect[curpart].style.display="none"
curpart=(curpart>0)? curpart-1 : partscollect.length-1
partscollect[curpart].style.display="block"
updatenav()
}
function updatenav(){
document.getElementById("backbutton").style.visibility=(curpart==0)? "hidden" : "visible"
document.getElementById("forwardbutton").style.visibility=(curpart==partscollect.length-1)? "hidden" : "visible"
}
function onloadfunct(){
getElementbyClass("multiparts")
partscollect[0].style.display="block"
document.getElementById("formnavigation").style.display="block"
updatenav()
}
if (window.addEventListener)
window.addEventListener("load", onloadfunct, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunct)
else if (document.getElementById)
window.onload=onloadfunct
</script>
第二步：可以开始将内容划分开来了：
<div class="multiparts" style="display: block">
<p>内容1</p>
</div>
<div class="multiparts">
<div>内容2</div>
</div>
<div class="multiparts">
<table><td>内容3</td></table>
</div>
第三步：接下来加上翻页的代码
<div id="formnavigation" style="width:200px; display:none">
<a id="backbutton" href="javascript:cycleback()" style="float:left">后一页</a>
<a id="forwardbutton" href="javascript:cycleforward()" style="float:right">前一页</a>
</div>
评论 (0) All
