JS實現(xiàn)圖片切換的特殊效果

2012/11/8 10:12:18作者：佚名來源：網(wǎng)絡

移動端

【實例名稱】

JS實現(xiàn)圖片切換的特殊效果

【實例描述】

為了增加頁面的美觀性，在進行圖片切換時通常使用類似幻燈片的效果。本例介紹如何實現(xiàn)這種圖片切換的特殊效果。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>無標題頁-學無憂（wangbatian.cn）</title>
<script language="javascript">
var imgUrl=new Array();
var imgLink=new Array();
var adNum=0;
var jumpUrl="http://pic.music.tom.com/view/35611/tid-35611-pid-1.html";
imgLink[1]="http://pic.music.tom.com/view/35611";
imgLink[2]="http://pic.music.tom.com";
imgUrl[1]="http://cimg.163.com/tech/2006/1/18/2006011810122068706.jpg";
imgUrl[2]="http://cimg.163.com/tech/2006/1/17/200601171002503f251.jpg";
var imgPre=new Array();
var j=0;
for (i=1;i<=imgUrl.length-1;i++) 
{
 if(imgLink[i]!="") {j++;} 
 else {break;}
}
function playTran()
{
 if (document.all)
  imgInit.filters.revealTrans.play();
}
var key=0;
//循環(huán)顯示圖片
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];
 jumpUrl=imgLink[adNum];
 theTimer=setTimeout("nextAd()", 7000);
}
//單擊圖片時實現(xiàn)導航
function goUrl()
{ 
 if (jumpUrl != ''){
  if (jumpTarget != '') window.open(jumpUrl,'_blank');
  else location.href=jumpUrl;
 }
}
</script>
需要在body中添加一個鏈接，代碼如下所示:
</head>
<body>
<a href="javascript:goUrl()"><img style=
"FILTER:revealTrans(duration=2,transition=7);
border:1 solid black" 
src="javascript:nextAd()" width="300" border="0" 
name="imgInit" height="210"></a>
</body>
</html>

 
【運行效果】

圖片切換的特殊效果運行效果