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函数在frame中的相互调用详解
Mar 03 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
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怎样调用MSSQL的存储过程
2006/10/09 PHP
PHP脚本的10个技巧(1)
2006/10/09 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
Angular4 中常用的指令入门总结
2017/06/12 Javascript
js实现select下拉框选择
2020/01/11 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
Python与Redis的连接教程
2015/04/22 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
spyder常用快捷键(分享)
2017/07/19 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
秋天的雨教学反思
2014/04/27 职场文书
解除劳动合同协议书
2014/09/17 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
导游词之河北邯郸
2019/09/12 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle