js实现图片和链接文字同步切换特效的方法


Posted in Javascript onFebruary 20, 2015

本文实例讲述了js实现图片和链接文字同步切换特效的方法。分享给大家供大家参考。具体实现方法如下:

<html>

<title>js图片和链接文字同步切换特效</title>

<head>

<script language=JavaScript>

var imgUrl=new Array();

var imgLink=new Array();

var imgTz=new Array();

var adNum=0;

imgUrl[1]="/images/m01.jpg";

imgLink[1]="https://3water.com";

imgTz[1]="<a href=#><font color=white>文字链接内容一 红叶传情</font></a>";

imgUrl[2]="/images/m02.jpg";

imgLink[2]="https://3water.com";

imgTz[2]="<a href=#><font color=white>文字链接内容二 野花绽放</font></a>";

imgUrl[3]="/images/m03.jpg";

imgLink[3]="https://3water.com";

imgTz[3]="<a href=#><font color=white>文字链接内容三 往事如茶</font></a>";

var j=0;

for (i=1;i<=3;i++) {

if( (imgUrl[i]!="") && (imgLink[i]!="") ) {

j++;

} else {

break;

}

}

function playTran(){

if (document.all)

imgInit.filters.revealTrans.play();

}

var key=0;

function nextAd(){

if(adNum<j)adNum++ ;

else adNum=1;

if( key==0 ){

key=1;

} else if (document.all){

imgInit.filters.revealTrans.Transition=6;

imgInit.filters.revealTrans.apply();

playTran();

}

document.images.imgInit.src=imgUrl[adNum];

document.getElementById('jdtz').innerHTML=imgTz[adNum];

theTimer=setTimeout("nextAd()", 3000);

}

function goUrl(){

jumpUrl=imgLink[adNum];

jumpTarget='_blank';

if (jumpUrl != ''){

if (jumpTarget != '')

window.open(jumpUrl,jumpTarget);

else

location.href=jumpUrl;

}

}

</script>

</head>

<body>

<table><tr><td>  <a href="javascript:goUrl()"><img style="FILTER: revealTrans(duration=2,transition=20); border=0" src="javascript:nextAd()"  width=320 height=240 border=0  name=imgInit></a> </td></tr><tr><td id=jdtz  bgcolor="blue"></td></tr></table>

</body>

</html>

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

Javascript 相关文章推荐
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
深入理解js中this的用法
May 28 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
js实现简单模态框实例
Nov 16 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 #Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 #Javascript
jQuery常用数据处理方法小结
Feb 20 #Javascript
jQuery数据缓存用法分析
Feb 20 #Javascript
jQuery性能优化技巧分析
Feb 20 #Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 #Javascript
jQuery源码解读之addClass()方法分析
Feb 20 #Javascript
You might like
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
Python学习笔记(二)基础语法
2014/06/06 Python
python数据挖掘需要学的内容
2019/06/23 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
Django配置跨域并开发测试接口
2020/11/04 Python
python中温度单位转换的实例方法
2020/12/27 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
优秀求职信范文分享
2013/12/19 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
中药学专业求职信
2014/05/31 职场文书
单位委托书
2014/10/15 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python