歡迎您光臨本站 註冊首頁

JS實現模擬FLASH幻燈片圖片切換網頁特效

←手機掃碼閱讀     火星人 @ 2014-03-09 , reply:0
只要完成#flashBox的XHTML的代碼設計,以及和其相關的CSS設計,然後直接調用new flashBoxCtrl("flashBox"),便可實現效果.構造函數里只要調入需要生成幻燈效果的ID,便能輕鬆實現.同時,數字標籤由對象計算后自動生成,無需手工操作,所有的工作都隱藏在對象內部,對外只需要調用構函數去不斷地構建對
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta name="author" content="RainoXu" />
<title>flash幻燈</title>
</head>
<body>
<style type ="text/css">
/* <![CDATA[ */
ul,li{
padding:0;
margin:0;
list-style:none;
}
#flashBox{
width:346px;
height:186px;
border:1px solid #EEE;
position:relative;
}
#flashBox img{
/*初始不要顯示*/
display:none;
/*用邊框來實現空位,因為margin和paading有時會引起些麻煩*/
border:3px solid #FFF;
}
#flashBox ul{
position:absolute;
right:7px;
bottom:9px;
font:9px tahoma;
}
#flashBox ul li{
display:block;
float:left;
width:12px;
height:12px;
line-height:12px;
margin-right:3px;
border:1px solid #999;
background:#F0F0F0;
text-align:center;
cursor:pointer;
}
#flashBox ul li.hover{
border-color:red;
background:#FFE1E1;
color:red;
}
/* ]]> */
</style>
<script type="text/javascript">
function flashBoxCtrl(o){
this.obj=document.getElementById(o);
//這個私有方法雖然寫了,但暫時沒用到
function addListener(ele,eventName,functionBody){
if (ele.attachEvent){
ele.attachEvent("on" eventName, functionBody);
}else if (ele.addEventListener){
ele.addEventListener("on" eventName,functionBody, false);
}else{
return false;
}
}
//初始化
this.init=function(){
var objImg=this.obj.getElementsByTagName("img");
var tagLength=objImg.length;
if (tagLength>0){
var oUl=document.createElement("ul");
oUl.setAttribute("id",o "numTag");
for (var i=0;i<tagLength;i ){
var oLi=oUl.appendChild(document.createElement("li"));
if (i==0){
oLi.setAttribute("class","hover"); //初始化時把第一個設置為高亮
oLi.setAttribute("className","hover");
}
//設置標籤的數字
oLi.appendChild(document.createTextNode((i 1)));
}
this.obj.appendChild(oUl);
objImg[0].style.display="block";
//設置標籤事件
var oTag=this.obj.getElementsByTagName("li");
for (var i=0;i<oTag.length;i ){
oTag[i].onmouseover=function(){
for (j=0;j<oTag.length;j ){
oTag[j].className="";
objImg[j].style.display="none";
}


this.className="hover";
objImg[this.innerHTML-1].style.display="block";
}
}
}
};
//自動滾動的方法還沒寫
this.imgRoll=function(){};
//生成對象時自動載入init()方法以初始化對象
this.init();
}
</script>
<div id="flashBox">
<img src="" >
<img src="" >
<img src="" >
<img src="" >
</div>
<script type="text/javascript">
//生成一個對象
new flashBoxCtrl("flashBox");
</script>
</body>
</html>


[火星人 ] JS實現模擬FLASH幻燈片圖片切換網頁特效已經有639次圍觀

http://coctec.com/docs/java/show-post-61187.html