js图片轮换显示实例(转载)

转自:http://www.cnblogs.com/yes123/p/3702519.html

用js脚本实现图片轮换显示,很简单的小例子,特此分享。

1,js代码部分,图片轮换代码

<script language="JavaScript">

var imgUrl=new Array();var imgLink=new Array();var imgText=new Array();var picNum=0;
imgUrl[1]="图片地址一";
imgLink[1]="链接1";
imgText[1]="标题或简介或其它HTML内容1";
imgUrl[2]="图片地址二";
imgLink[2]="链接2";
imgText[2]="标题或简介或其它HTML内容2";
imgUrl[3]="图片地址三";
imgLink[3]="链接3";
imgText[3]="标题或简介或其它HTML内容3";
imgUrl[4]="图片地址四";
imgLink[4]="链接4";
imgText[4]="标题或简介或其它HTML内容4";
imgUrl[5]="图片地址五";
imgLink[5]="链接5";
imgText[5]="标题或简介或其它HTML内容5";function NextPic(){if(picNum<4) picNum++ ;//显示4个图片else picNum=1;if (document.all){ www.jbxue.com//注意,如果存在于FORM表单中,需要使用下面的方法,否则可直接使用name。document.imgInit.filters.revealTrans.Transition=Math.floor(Math.random()*23);
document.imgInit.filters.revealTrans.apply();
document.imgInit.filters.revealTrans.play();
}
document.images.imgInit.src=imgUrl[picNum];//如果不是图片,而是SWF等,可做判断,内容可在程序中做好,再放于下面。focustext.innerHTML='<a href='+imgLink[picNum]+' target=_blank>'+imgText[picNum]+'</a>';//设置翻页时间theTimer=setTimeout('NextPic()', 3000);
}function goUrl(){
window.open(imgLink[picNum],'_blank');
}</script>

2,html代码部分

<TABLE cellPadding=0 width=100% border=0>

<TR>
<TD align=middle height="140" >
<div align='center'>
<a href='javascript:goUrl()'><img style="FILTER: revealTrans(duration=2,Transition=5)" src="javascript:NextPic()" width="170" height="120" border="1" id=imgInit name=imgInit></a></TD></TR>
<TR><TD align=middle height="38" ><div name=focustext id=focustext align='center'></div>
</div>
</TD></TR></TABLE>

您可能感兴趣的文章:


转载于:https://my.oschina.net/softsky/blog/267459

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值