JS实现FLASH幻灯片图片切换效果的方法


Posted in Javascript onMarch 04, 2015

本文实例讲述了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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 #Javascript
js实现仿QQ秀换装效果的方法
Mar 04 #Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 #Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 #Javascript
javascript 动态创建表格的2种方法总结
Mar 04 #Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 #Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 #Javascript
You might like
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
DOM下的节点属性和操作小结
2009/05/14 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
如何运行Python程序的方法
2013/04/21 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
Python之web模板应用
2017/12/26 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
Python os.access()用法实例
2019/02/18 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
清洁工表扬信
2014/01/08 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android