JavaScript实现图片轮换显示几种构思
(1)通过JavaScript和CSS,利用img的src属性实现(在IE较低版本中)
<script language="JavaScript">
var imgUrl=new Array();
var imgLink=new Array();
imgUrl[0]="blog.jpg";
imgLink[0]="http://www.cnknow.com/";
imgUrl[1]="01.jpg";
imgLink[1]="http://www.cnknow.com/";
var imgPre=new Array();
var adNum=0;
var j= imgUrl.length;
function playTran()
{
if (document.all)
imgInit.filters.revealTrans.play();
}
function nextAd()
{
if(adNum < j-1)
adNum ++ ;
else
adNum=0;
if(document.all)
{
imgInit.filters.revealTrans.Transition=100;
imgInit.filters.revealTrans.apply();
playTran();
}
document.images.imgInit.src=imgUrl[adNum];
theTimer=setTimeout("nextAd()", 2000);
}
function goUrl()
{
jumpUrl=imgLink[adNum];
jumpTarget='_blank';
if (jumpUrl != '')
{
if(jumpTarget != '')
window.open(jumpUrl,jumpTarget);
else
location.href=jumpUrl;
}
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="8">
</td>
<td>
<!-- 动态图开始 -->
<a href="javascript:goUrl()">
<img style="filter: revealTrans(duration=2,transition=20); border-color: #000000;
color: #000000" src="javascript:nextAd()" border="1" class="img01" name="imgInit"></a>
<!-- 动态图结束 --></td>
</tr>
</table>
</body>
(2)
待续……时间原因,本博文推迟发布!