JS實(shí)現(xiàn)FLASH幻燈片圖片切換效果的方法
更新時(shí)間：2015年03月04日 10:03:50 作者：代碼家園
這篇文章主要介紹了JS實(shí)現(xiàn)FLASH幻燈片圖片切換效果的方法,實(shí)例分析了javascript操作圖片實(shí)現(xiàn)Flash幻燈效果的技巧,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)FLASH幻燈片圖片切換效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!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>JS模擬FLASH幻燈片圖片切換效果</title>
</head>
<body>
<style type ="text/css">
/* <![CDATA[ */
ul,li{
padding:0;
margin:0;
list-style:none;
}
#flashBox{
width:326px;
height:246px;
border:1px solid #EEE;
position:relative;
}
#flashBox img{
/*初始不要顯示*/
display:none;
/*用邊框來實(shí)現(xiàn)空位，因?yàn)閙argin和paading有時(shí)會(huì)引起些麻煩*/
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);
//這個(gè)私有方法雖然寫了，但暫時(shí)沒用到
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"); //初始化時(shí)把第一個(gè)設(shè)置為高亮
oLi.setAttribute("className","hover");
}
//設(shè)置標(biāo)簽的數(shù)字
oLi.appendChild(document.createTextNode((i+1)));
}
this.obj.appendChild(oUl);
objImg[0].style.display="block";
//設(shè)置標(biāo)簽事件
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";
}
}
}
};
//自動(dòng)滾動(dòng)的方法還沒寫
this.imgRoll=function(){};
//生成對(duì)象時(shí)自動(dòng)加載init()方法以初始化對(duì)象
this.init();
}
</script>
<div id="flashBox">
<img src="/images/m02.jpg" />
<img src="/images/m03.jpg" />
<img src="/images/m04.jpg" />
<img src="/images/m09.jpg" />
</div>
<script type="text/javascript">
//生成一個(gè)對(duì)象
new flashBoxCtrl("flashBox");
</script>
</body>
</html>
<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>JS模擬FLASH幻燈片圖片切換效果</title>
</head>
<body>
<style type ="text/css">
/* <![CDATA[ */
ul,li{
padding:0;
margin:0;
list-style:none;
}
#flashBox{
width:326px;
height:246px;
border:1px solid #EEE;
position:relative;
}
#flashBox img{
/*初始不要顯示*/
display:none;
/*用邊框來實(shí)現(xiàn)空位，因?yàn)閙argin和paading有時(shí)會(huì)引起些麻煩*/
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);
//這個(gè)私有方法雖然寫了，但暫時(shí)沒用到
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"); //初始化時(shí)把第一個(gè)設(shè)置為高亮
oLi.setAttribute("className","hover");
}
//設(shè)置標(biāo)簽的數(shù)字
oLi.appendChild(document.createTextNode((i+1)));
}
this.obj.appendChild(oUl);
objImg[0].style.display="block";
//設(shè)置標(biāo)簽事件
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";
}
}
}
};
//自動(dòng)滾動(dòng)的方法還沒寫
this.imgRoll=function(){};
//生成對(duì)象時(shí)自動(dòng)加載init()方法以初始化對(duì)象
this.init();
}
</script>
<div id="flashBox">
<img src="/images/m02.jpg" />
<img src="/images/m03.jpg" />
<img src="/images/m04.jpg" />
<img src="/images/m09.jpg" />
</div>
<script type="text/javascript">
//生成一個(gè)對(duì)象
new flashBoxCtrl("flashBox");
</script>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 靈活使用數(shù)組制作圖片切換js實(shí)現(xiàn)
- js組件SlotMachine實(shí)現(xiàn)圖片切換效果制作抽獎(jiǎng)系統(tǒng)
- javascript圖片切換綜合實(shí)例（循環(huán)切換、順序切換）
- js實(shí)現(xiàn)索引圖片切換效果
- js鼠標(biāo)點(diǎn)擊圖片切換效果實(shí)現(xiàn)代碼
- js帶前后翻頁的圖片切換效果代碼分享
- js+div實(shí)現(xiàn)文字滾動(dòng)和圖片切換效果代碼
- js鼠標(biāo)點(diǎn)擊圖片切換效果代碼分享
- jQuery圖片切換插件jquery.cycle.js使用示例
- js實(shí)現(xiàn)圖片切換（動(dòng)畫版）
相關(guān)文章
setTimeout()與setInterval()方法區(qū)別介紹
計(jì)時(shí)器setTimeout()和setInterval()兩個(gè)都是js的計(jì)時(shí)功能的函數(shù)兩個(gè)有些區(qū)別，下面為大家簡(jiǎn)單介紹下，希望對(duì)大家有所幫助2013-12-12
淺析JavaScript中l(wèi)et與const命令的區(qū)別
這篇文章主要為大家詳細(xì)介紹了JavaScript中l(wèi)et命令與const命令的用法及區(qū)別,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的可以參考下2023-09-09
JS加ASP二級(jí)域名轉(zhuǎn)向的代碼...2007-05-05
js實(shí)現(xiàn)自動(dòng)輪換選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)自動(dòng)輪換選項(xiàng)卡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
js將類數(shù)組對(duì)象轉(zhuǎn)換成數(shù)組對(duì)象
javascript與dom有許多瑕疵，如著名的類數(shù)組對(duì)象Arguments，其他諸如HTMLCollection,NodeList如果它們都是數(shù)組的子類，那多省時(shí)啊。2010-05-05
原生js實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖效果
本文主要介紹了原生js實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家介紹了輸入npm?run?xxx后執(zhí)行原理深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了用 js 寫一個(gè) js 解釋器過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
利用原生JS自動(dòng)生成文章標(biāo)題樹的實(shí)例
網(wǎng)上關(guān)于生成文章標(biāo)題樹的示例很多，這篇文章介紹的是利用原生JS實(shí)現(xiàn)自動(dòng)生成文章標(biāo)題樹，實(shí)現(xiàn)過程很簡(jiǎn)單，有需要的可以參考借鑒。2016-08-08
JavaScript實(shí)現(xiàn)小程序圖片裁剪功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)小程序圖片裁剪功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下2023-03-03