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 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 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
php制作动态随机验证码
2015/02/12 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
九步学会Python装饰器
2015/05/09 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
Python 错误和异常代码详解
2018/01/29 Python
基于python实现学生信息管理系统
2019/11/22 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
用python批量下载apk
2020/12/29 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
.NET初级开发工程师面试题
2014/04/18 面试题
计算机专业应届毕业生自荐信
2013/09/26 职场文书
导游实习生自荐书
2014/01/28 职场文书
学生会主席竞聘书
2014/03/31 职场文书
空乘英文求职信
2014/04/13 职场文书
班级旅游计划书
2014/05/03 职场文书
安全责任书范文
2014/08/25 职场文书
好人好事演讲稿
2014/09/01 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
超市店长竞聘书
2015/09/15 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
python面向对象版学生信息管理系统
2021/06/24 Python