JS实现图片切换的特殊效果

2012/11/8 10:12:18作者：佚名来源：网络

移动端

【实例名称】

JS实现图片切换的特殊效果

【实例描述】

为了增加页面的美观性，在进行图片切换时通常使用类似幻灯片的效果。本例介绍如何实现这种图片切换的特殊效果。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页-学无忧（www.xue51.com）</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;
//循环显示图片
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);
}
//单击图片时实现导航
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>

 
【运行效果】

图片切换的特殊效果运行效果