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 相关文章推荐
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
JS async 函数的含义和用法实例总结
Apr 08 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 GD绘制24小时柱状图
2008/06/28 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
微信小程序倒计时功能实现代码
2017/11/09 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python base64编码解码实例
2015/06/21 Python
python 判断网络连通的实现方法
2018/04/22 Python
Python3处理HTTP请求的实例
2018/05/10 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
python3实现绘制二维点图
2019/12/04 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
python speech模块的使用方法
2020/09/09 Python
Django如何实现防止XSS攻击
2020/10/13 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
我是一名护士演讲稿
2014/08/28 职场文书
优秀教师个人总结
2015/02/11 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
工作服管理制度范本
2015/08/06 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
vue实现锚点定位功能
2021/06/29 Vue.js
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers