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 相关文章推荐
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
Javascript的表单验证长度
Mar 16 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
如何提高javascript加载速度
Dec 26 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
vue - vue.config.js中devServer配置方式
Oct 30 Javascript
vuex存值与取值的实例
Nov 06 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中实现精确设置session过期时间的方法
2014/07/17 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
用Python写的图片蜘蛛人代码
2012/08/27 Python
python实现socket端口重定向示例
2014/02/10 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
Python configparser模块操作代码实例
2020/06/08 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
法人授权委托书
2014/04/03 职场文书
故意杀人案辩护词
2015/05/21 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
十个Python自动化常用操作,即拿即用
2021/05/10 Python
Redis高可用集群redis-cluster详解
2022/03/20 Redis
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技