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 相关文章推荐
javascript 伪数组实现方法
Oct 11 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
Redis基本知识、安装、部署、配置笔记
Mar 05 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
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 文件状态缓存带来的问题
2008/12/14 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
提高php编程效率技巧
2015/08/13 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
取得传值的函数
2006/10/27 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
Python3实现并发检验代理池地址的方法
2016/09/18 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
大学生个人求职信范文
2013/09/21 职场文书
怎样写好自我鉴定
2013/12/04 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
开学典礼演讲稿
2014/05/23 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
公司更名通知函
2015/04/24 职场文书
清洁工工作总结
2015/08/11 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
mysql的数据压缩性能对比详情
2021/11/07 MySQL