JS图片轮换效果

JS的轮换效果堪比精美的FLASH，搜集了几种效果。

随机变换效果
<table border=0 cellpadding=0 cellspacing=0>
 <tr><td height=4></td></tr>
 <tr><td width=8></td><td>
<!-- 动态图开始 -->

<script language=JavaScript>

var imgUrl=new Array();
var imgLink=new Array();
var adNum=0;
imgUrl[1]="http://www.cnknow.com/images/Main/1.gif";
imgLink[1]="http://www.cnknow.com/";

imgUrl[2]="http://blog.cnknow.com/attachments/month_0603/85wa_135787.jpg";
imgLink[2]="http://www.cnknow.com/";

imgUrl[3]="http://blog.cnknow.com/attachments/month_0603/b92f_135798.jpg";
imgLink[3]="http://www.cnknow.com/";


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


渐变轮换效果
<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://www.cnknow.com/images/Main/1.gif" 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/month_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://www.cnknow.com/images/Main/1.gif" 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://blog.cnknow.com/attachments/month_0603/b92f_135798.jpg width=241 height=121 border=0></A>

                                        </div>


js生成Flash效果（sina）

<SCRIPT type=text/javascript>
    <!--
    
    var focus_width=260
    var focus_height=182
    var text_height=25
    var swf_height = focus_height+text_height
    
    var pics='http://blog.cnknow.com/attachments/month_0603/3.jpg|http://blog.cnknow.com/attachments/month_0603/2.jpg|http://blog.cnknow.com/attachments/month_0603/1.jpg'
    var links='http://cnknow.com/|http://cnknow.com/|http://cnknow.com/'
    var texts='唐正东与莫科之争|江苏掀翻八一|巴特尔独木难支'
    
    document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');
    document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="http://www.cnknow.com/images/media/pixviewer.swf"><param name="quality" value="high"><param name="bgcolor" value="#DADADA">');
    document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
    document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
    document.write('</object>');
    
    //-->
</SCRIPT>




<script language="Javascript" type="text/javascript">
function ImgArray(len){
    this.length=len;
}
ImgName = new ImgArray(10);
ImgName[0]="http://www.cnknow.com/images/Main/1.gif";
ImgName[1]="http://blog.cnknow.com/attachments/month_0603/85wa_135787.jpg";
var t=0;
function playImg(){
    if (t==1){t=0;}
    else{t++;}
    img.style.filter="blendTrans(Duration=3)";
    img.filters[0].apply();
    img.src=ImgName[t];
    img.filters[0].play();
    mytimeout=setTimeout("playImg()",5000);
}
</script>
</head>
<img src="http://www.cnknow.com/images/Main/1.gif" name="img" />
<script language="Javascript">playImg();</script>
 

[本日志由 eastlee 于 2009-09-11 11:33 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: 图片轮换图片轮换
相关日志: