dreamweaver网页分页

<script src="RevealTrans.js"></script>
 <style type="text/css">
.container{
 width:600px;
 height:314px;
 border:1px solid #eee;
 position:relative;
}
#idNum{ position:absolute; right:5px; bottom:5px;}
#idNum li{
 float: left;
 list-style:none;
 color: #fff;
 text-align: center;
 line-height: 16px;
 width: 16px;
 height: 16px;
 font-family: Arial;
 font-size: 12px;
 cursor: pointer;
 margin: 1px;
 border: 1px solid #707070;
 background-color: #060a0b;
}
#idNum li.on{
 line-height: 18px;
 width: 18px;
 height: 18px;
 font-size: 14px;
 border: 0;
 background-color: #ce0609;
 font-weight: bold;
}

</style>

 

<div id="idPicShow" class="container">
  <ul id="idNum">
  </ul>
</div>
<div id="idPicText"></div>
<div id="idPicList"></div>

<script>

var rvt = new RevealTrans("idPicShow");

//添加变换对象
rvt.Add('images/tupian1.jpg');
rvt.Add('images/tupian2.jpg');
rvt.Add('images/tupian3.jpg');

var oList = $("idPicList"), oText = $("idPicText"), arrImg = [];

var oNum = $("idNum"), arrNum = [];

//设置图片列表
Each(rvt.List, function(list, i){
 //图片式
 var img = document.createElement("img");
 img.src = list["img"]; img.alt = list["text"];
 
 //按钮式
 var li = document.createElement("li");
 li.innerHTML = i + 1;
 arrNum[i] = li;
 oNum.appendChild(li);
 //事件设置
 img.onmouseover = li.onmouseover = function(){ rvt.Auto = false; rvt.Index = i; rvt.Start(); };
 
});

//设置图片列表样式 文本显示区域
rvt.onShow = function(){
 var i = this.Index, list = this.List[i];
 
 //按钮式
 Each(arrNum, function(o){ o.className = ""; }); arrNum[i].className = "on";
 
}

 

rvt.Start();

</script>