JS實現FLASH幻燈片圖片切換效果的方法
更新時間：2015年03月04日 10:03:50 作者：代碼家園
這篇文章主要介紹了JS實現FLASH幻燈片圖片切換效果的方法,實例分析了javascript操作圖片實現Flash幻燈效果的技巧,需要的朋友可以參考下
本文實例講述了JS實現FLASH幻燈片圖片切換效果的方法。分享給大家供大家參考。具體實現方法如下：
復制代碼 代碼如下:
<!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;
/*用邊框來實現空位，因為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="/images/m02.jpg" />
<img src="/images/m03.jpg" />
<img src="/images/m04.jpg" />
<img src="/images/m09.jpg" />
</div>
<script type="text/javascript">
//生成一個對象
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;
/*用邊框來實現空位，因為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="/images/m02.jpg" />
<img src="/images/m03.jpg" />
<img src="/images/m04.jpg" />
<img src="/images/m09.jpg" />
</div>
<script type="text/javascript">
//生成一個對象
new flashBoxCtrl("flashBox");
</script>
</body>
</html>
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
在本篇文章中小編給各位整理的是關于js new Date()測試的相關實例代碼，有需要的朋友們參考學習下。2019-10-10
本文主要介紹了ES6 Promise.race的用法詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-09-09
這篇文章主要給大家介紹了ES6中Class和Module的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-05-05
本篇文章主要是對javascript(js)中的小數點乘法除法問題進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
今天小編就為大家分享一篇關于JSON.stringify()方法講解，小編覺得內容挺不錯的，現在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
本篇文章主要介紹了淺談PDF.js使用心得，pdf.js 是一個技術原型主要用于在 HTML5 平臺上展示 PDF 文檔，無需任何本地技術支持。非常具有實用價值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了JavaScript實現常用二級省市級聯下拉列表的方法,實例分析了javascript實現級聯下拉列表的技巧與相關的元素操作方法,需要的朋友可以參考下2015-03-03
BootstrapTable與KnockoutJS相結合實現增刪改查功能【一】
KnockoutJS是一個JavaScript實現的MVVM框架。通過本文給大家介紹BootstrapTable與KnockoutJS相結合實現增刪改查功能【一】，感興趣的朋友一起學習吧2016-05-05
Javascript中return與閉包對大家來說應該都不陌生，下面本文就給大家介紹了Javascript中return的使用與閉包。文中給出了詳細的示例代碼，對大家的理解和學習具有一定的參考借鑒價值，感興趣的朋友們下面來一起看看吧。2017-01-01![[JS]點出統(tǒng)計器](http://img.jbzj.com/images/xgimg/bcimg9.png)
[JS]點出統(tǒng)計器...2006-07-07