js特效：图片翻转效果

需求使然，需要实现图片翻转特效，类似诸多大型网站上滚动的图片新闻。大凡特效，JS一般都可实现，而且用JS，却酷似Flash，非常绚。记得以前做过的小东西，直接拿来用了。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script language=JavaScript>

var imgUrl=new Array();
var imgLink=new Array();
var adNum=0;
imgUrl[1]=http://photo14.yupoo.com/20071212/143930_1826427539_yakfhejo.jpg;
imgLink[1]="http://www.thinkjam.org";

imgUrl[2]=http://photo14.yupoo.com/20071212/143930_1826427539_yakfhejo.jpg;
imgLink[2]="http://www.thinkjam.org";

imgUrl[3]=http://photo14.yupoo.com/20071212/143930_1826427539_yakfhejo.jpg;
imgLink[3]="http://www.thinkjam.org";

var imgPre=new Array();
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=100;
imgInit.filters.revealTrans.apply();
playTran();

}
document.images.imgInit.src=imgUrl[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>

<div>
<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><!

-- 动态图结束 --></div>

</body></html>

JS代码可放入页面代码中任何位置，最好放在head中。这种方法当然是最简单的了，因为我对代码如此白痴都会用，呵呵。此外还有许多其他方法，如下：

其他一：渐变轮换效果

<SCRIPT>
var NowFrame = 1;
var MaxFrame = 4;
var bStart = 0;
function fnToggle() {
var next = NowFrame + 1;

    if(next == MaxFrame+1)
    {
        NowFrame = MaxFrame;
        next = 1;
    }

    if(bStart == 0)
    {
        bStart = 1;

        setTimeout('fnToggle()', 3500);

        return;
    }
    else
    {
        oTransContainer.filters[0].Apply();

document.images['oDIV'+next].style.display = "";
document.images['oDIV'+NowFrame].style.display = "none";

oTransContainer.filters[0].Play(duration=2);

        if(NowFrame == MaxFrame)
            NowFrame = 1;
        else
            NowFrame++;
    }    setTimeout('fnToggle()', 3500);
}

fnToggle();
</SCRIPT>
<div align="center">
<DIV id=oTransContainer style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 165px; HEIGHT: 83px">
<A href="/default.asp" target=_blank><IMG id=oDIV1 style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" src=http://photo15.yupoo.com/20080102/181403_14520634_zthbrrih.jpg border=0 width=241 height=121></A>
<A href="/default.asp" target=_blank><IMG id=oDIV2 style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; DISPLAY: none; BORDER-BOTTOM: black 1px solid" width=241 height=121 src=http://blog.cnknow.com/attachments/I8G2007122974436_0603/85wa_135787.jpg border=0></A>
<A href="/default.asp" target=_blank><IMG id=oDIV3 style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; DISPLAY: none; BORDER-BOTTOM: black 1px solid" src=http://photo15.yupoo.com/20080102/181403_14520634_zthbrrih.jpg border=0 width=241 height=121></A>
<A href="/default.asp" target=_blank><IMG id=oDIV4 style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; DISPLAY: none; BORDER-BOTTOM: black 1px solid" src=http://photo15.yupoo.com/20080102/181403_14520634_zthbrrih.jpg width=241 height=121 border=0></A>

</div>

其他二：JS生成的Flash效果

<SCRIPT type=text/javascript>
    
</SCRIPT>

其他三：

其他四：

<script language=JavaScript>
var imgUrl=new Array();
var imgLink=new Array();
var imgTz=new Array();
var buttonShow=1;
var buttonPos=1;
var buttonX;
var buttonY;
var bakularCode=""
var adNum=0;
var dakularCode="";
imgUrl[1]="http://photo14.yupoo.com/20080102/181403_1536117876_xqnapaxy.jpg";
imgLink[1]="http://www.thinkjam.org/mercury";
imgTz[1]="墨神的凡龛";
imgUrl[2]="http://photo15.yupoo.com/20080102/181403_14520634_zthbrrih.jpg";
imgLink[2]="http://www.thinkjam.org";
imgTz[2]="原生脑浆";
var imgPre=new Array();
for (i=1;i<4;i++)
{
imgPre[i]=new Image();
    imgPre[i].src=imgUrl[i];
}
function setTransition()
{
if (document.all)
{
   imgUrlrotator.filters.revealTrans.Transition=23;//Math.floor(Math.random()*23)
     imgUrlrotator.filters.revealTrans.apply();
}
}
function playTransition()
{
if (document.all)
imgUrlrotator.filters.revealTrans.play()
}
function nextAd(toNum)
{
if(adNum<imgUrl.length-1)
adNum++ ;
else
adNum=1;
   if(toNum!=null) adNum=toNum;
   setTransition();
document.images.imgUrlrotator.src=imgUrl[adNum];
document.getElementById('linktext').innerHTML=imgTz[adNum];
document.images.imgUrlrotator.alt='今日头条：'+imgTz[adNum];
document.getElementById('linktext').innerHTML="<a href="+imgLink[adNum]+" target=_blank class=px14-lh20>"+imgTz[adNum]+"</a>";
playTransition();
checkButton();
if(toNum!=null)
   {toNum=null;theTimer=setTimeout("nextAd()", 7000);}
else
{theTimer=setTimeout("nextAd()", 7000);}
}
function jump2url()
{
jumpUrl=imgLink[adNum];jumpTarget='_blank';
if (jumpUrl != '')
{   if (jumpTarget != '')
     window.open(jumpUrl,jumpTarget);
   else location.href=jumpUrl;
   }
}
function displayStatusMsg()
{
status=imgLink[adNum];
    document.returnValue = true;
}
function checkButton()
{
for(i=1;i<=imgUrl.length-1;i++)
   {if(i==adNum)
    //document.getElementById('bt'+i).style.backgroundColor='#00FF00';
    eval("bt"+i+".style.backgroundColor='#9B0000';bt"+i+".style.color='#FFFFFF';");
   else
    eval("bt"+i+".style.backgroundColor='#CCCCCC';bt"+i+".style.color='#000000';");
   }
}
function dakularButtons()
{
if(buttonShow==1)
{
   switch(buttonPos)
   {
    case 1:{buttonX=160+20-imgUrl.length*20;buttonY=16;break;}
    case 2:{buttonX=160+20-imgUrl.length*20;buttonY=125;break;}
    default:{buttonX=160+20-imgUrl.length*20;buttonY=16;break;}
   }
   for(i=1;i<=imgUrl.length-1;i++)
   {
    dakularCode=dakularCode+"<div id='bt"+i+"' style='display:inline; height=14px; width:20px; border:1px solid #000000; background-color:#f7f7f7; color:#000000; font-size:12px; line-height:14px; filter:Alpha(Opacity=50, FinishOpacity=50,Style=2);' align='center' onMouseOver=this.style.backgroundColor='#FFFFFF';this.style.color='#000000';this.style.cursor='hand' onMouseOut=checkButton(); onClick='clearTimeout(theTimer);nextAd("+i+");'>"+i+"</div>";
   }
   dakularCode="<div style='display:inline; position:relative;left:"+buttonX+"px; top:"+buttonY+"px; z-index:1;'>"+dakularCode+"</div>";
   document.write(dakularCode);
}
}
</script>
<table border="0" cellpadding="0" cellspacing="0" id=newsTable style="position:relative; top:-10px;right:0px; font-size:12px;">
<script language="javascript">dakularButtons();</script><tr><td><a onMouseOver="displayStatusMsg();return document.returnValue;" onMouseOut="status='';" href="javascript:jump2url()"><img style="FILTER: revealTrans(duration=1,transition=18); border:1px solid #000000" src="javascript:nextAd()" width=160 height=150 border=0 name=imgUrlrotator alt="今日头条"></a></td></tr>
<tr><td bgcolor="#f0f0f0" align="center" style="border-bottom:1px solid #000000; border-left:1px solid #000000;border-right:1px solid #000000;" height="20"><label id="linktext"></label></td></tr>
</table>

其他五：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Content-Language" content="zh-CN">
<title>DronFw Example</title>
<style type="text/css"> td,body{font-size:12px;}</style>
<script type="text/javascript" src="http://ucren.com/dronfw/DronFw/boot.js" loadClass="PicturePlayer"></script>
</head>
<body>
<h2>游戏人图片轮播器类</h2>
<hr>

其它说明：由于 Firefox 不支持滤镜，所以那些变来变去的效果都没有，只是简单的切换
*/
</script>
</body>
</html>

其他六：

var imgwidth = 550;//图片宽度
var imgheight = 134;//图片宽度

//修改点1：循环添加内层div内容以增加个数
str += "<div id='imgnv'><div id='it1' class='on' onmouseover='ImgSwitch(1, true)' onmouseout='Pause(false)'>1</div><div id='it2' class='off' onmouseover='ImgSwitch(2, true)' onmouseout='Pause(false)'>2</div><div id='it3' class='on' onmouseover='ImgSwitch(3, true)' onmouseout='Pause(false)'>3</div><div id='it4' class='off' onmouseover='ImgSwitch(4, true)' onmouseout='Pause(false)'>4</div></div>";
str += "<div id='titnv'><b>" + tits[1] + "</b></div>";
str += "</div>";
document.write(str);

var oi = document.getElementById("dimg");
var pause = false;
var curid = 1;
var lastid = 1;
var sw = 1;
var opacity = 100;
var speed = 15;
var delay = (document.all)? 400:700;

function SetAlpha(){
if(document.all){
if(oi.filters && oi.filters.Alpha) oi.filters.Alpha.opacity = opacity;
}else{
oi.style.MozOpacity = ((opacity >= 100)? 99:opacity) / 100;
}
}

function ImgSwitch(id, p){
if(p){
pause = true;
opacity = 100;
SetAlpha();
}
oi.src = imgs[id].src;
document.getElementById("dlink").href = links[id];
document.getElementById("it" + lastid).className = "off";
document.getElementById("it" + id).className = "on";
document.getElementById("titnv").innerHTML = "<b>" + tits[id] + "</b>";
curid = lastid = id;
}

function Pause(s){
pause = s;
}

function StartScroll(){
setInterval(ScrollImg, speed);
}

function CheckLoad(){
if (imgs[1].complete == true && imgs[2].complete == true) {
clearInterval(checkid);
setTimeout(StartScroll, 2000);
}
}

var checkid = setInterval(CheckLoad, 10);
</script>

JS特效方法多多，但是具体实现时，不得不考虑其在各浏览器的兼容性问题，详见JS特效的兼容性：重叠层和遮挡问题的解决。

Comments

于风

August 9, 2008 12:22 PM

我用了翻转图片的效果,但
imgUrl[2]="http://www.zga.cn/taobao/bag/24/DSC_0173.jpg"; 的图片总是显示不出来
通过http://www.zga.cn/taobao/bag/24/DSC_0173.jpg可以找到图片,请问下这是什么原因呢?
谢谢了

墨神

August 9, 2008 6:19 PM

文中介绍了多种方法，你使用的哪种？

August 11, 2008 11:53 AM

哦那个问题已经解决了
现在有个新的问题,在"其他五"里面,总在运行的时候碰到这样的问题:"DronFw"未定义.这是什么原因?谢谢了!!
下面是代码:

DronFw Example
td, body{font-size:12px;}

游戏人图片轮播器类

//Name, Title, Src, Url
var pdata =
[
["单肩包", "标题一", "http://www.zga.cn/taobao/bag/3/DSC_0154副本.jpg", "http://auction1.taobao.com/auction/item_detail-db1-0863c77bc7306980e943ea6460a50edd.jhtml"],
["斜挎包", "标题二", "http://www.zga.cn/taobao/bag/4/DSC_0168副本.jpg", "http://auction1.taobao.com/auction/item_detail-db1-14c81dc0d5d91583ee904546d5eed0e0.jhtml"],
["手提包", "标题三", "http://www.zga.cn/taobao/bag/5/DSC_0212副本.jpg", "http://auction1.taobao.com/auction/item_detail-db1-003032f334783d49974f8371e2c9f86f.jhtml"],
["多功能包", "标题四", "http://www.zga.cn/taobao/bag/12/DSC_0146.jpg", "http://auction1.taobao.com/auction/item_detail-db1-16bb1ae1088cdeb2e3480be73adf14ab.jhtml"]
];

var pp = new DronFw.Class.PicturePlayer;
pp.createPlayer("box", 365, 120);
pp.timeout = 2500;
pp.loadData(pdata);
/*
PicturePlayer 类的属性方法如下：
属性
timeout : 等待 timeout 毫秒后切换帧
方法
createPlayer(tid, width, height) 在 id 为 tid 的层里创建大小为 width * height 的轮播器
loadData(f) : 加载图片信息数据
其它说明：由于 Firefox
不支持滤镜，所以那些变来变去的效果都没有，只是简单的切换
*/