主题:  有谁知道这个效果是如何做的?

pengyue

职务:普通成员
等级:1
金币:0.0
发贴:37
#12005/6/11 23:22:42
我在D-link的网站看到一个自己变换广告画面的功能,实现自动更换图片不难,但如何让图片链接一起更换,我倒是没有想明白,请问有哪位能指教一二的?

网站网址是:http://www.dlink.com



NudeAngel

职务:普通成员
等级:3
金币:10.0
发贴:793
#22005/6/14 10:52:41

// global variables
var adArray = null;
var imageArray = null;
var currentAd = 0;
var mainAd = null;
var counter = 0;
var currentTimeOutID = 0;

function parseLinkImage(adLinkArray, adImagePathArray, adCaptionArray, adIndex)
{
    if (adLinkArray[adIndex] != null)
        document.writeln("<div><a href=\"" + adLinkArray[adIndex] + "\"><img src=\"" + adImagePathArray[adIndex] + "\" alt=\"" + adCaptionArray[adIndex] + "\" border=0 ID=\"image" + adIndex + "\"></a></div>";
    else
        document.writeln("<div><img src=\"" + adImagePathArray[adIndex] + "\" ID=\"image" + adIndex + "\"></div>";
}

function parseNav(adImagePathArray2)
{
    document.write("<div align=\"right\"><font size=1 face=arial style=\"color: #b1b4b5\">";
    var selectedIndex = 0;
    for (j = 0; j < adImagePathArray2.length; j++)
    {
        selectedIndex = j + 1;
        document.write("<a style=\"color: #b1b4b5\" href=\"#\" onclick=\"runEffect('" + selectedIndex + "');\">" + selectedIndex + "</a> | ";
    }
    document.writeln("</font><a href=\"#\" onclick=\"runEffect('prev');\"><img src=\"\/images\/home\/main\/arrow_prev_gray.gif\" width=\"8\" height=\"9\" border=\"0\" align=\"absbottom\"></a><img src=\"\/images\/spacer.gif\" width=\"6\" height=\"1\"><a href=\"#\" onclick=\"runEffect('next');\"><img src=\"\/D-Link图像变换.files\/arrow_next_gray.gif\" width=\"8\" height=\"9\" border=\"0\" align=\"absbottom\"></a></div>";
}

function runEffect(whichAd)
{
    if (counter++ == 0)
    {
        // next loop after a preset period
        currentTimeOutID = setTimeout("runEffect()", adDuration);
        return;
    }

    if (isLAN())
    {
        // define filter style
        mainAd.style.filter = "blendTrans(duration=1) revealTrans(duration=1,transition=5)";
        
        // freeze current state
        mainAd.filters(0).apply();
        mainAd.filters(1).apply();
    }

    // turn off current one
    adArray[currentAd].display = "none";
    
    // find out the next one
    if (!isNaN(parseInt(whichAd)))
    {
        currentAd = parseInt(whichAd) - 1;
    }    
    else if (whichAd == "prev"
    {
        var previousAd = currentAd - 1;
        if (previousAd <= -1)
            previousAd = imageArray.length - 1;
        currentAd = previousAd;
    }
    else
    {
        var nextAd = (currentAd + 1) % imageArray.length;
        currentAd = nextAd;
    }
    
    // turn the next one visible
    adArray[currentAd].display = "block";

    if (isLAN())
    {
    // execute filter
        mainAd.filters(0).play();
        mainAd.filters(1).play();
    }

    // clear previously set time out if previous and next buttons is clicked
    if ((!isNaN(parseInt(whichAd))) || whichAd == "prev" || whichAd == "next"
        clearTimeout(currentTimeOutID);
        
    // next loop after a preset period
    currentTimeOutID = setTimeout("runEffect()", adDuration);
}

function filterEffect(adLinkArray, adImagePathArray, adCaptionArray, adWidth, adHeight, showNav)
{
    // generate random number
    // var randomChoice = Math.floor(Math.random() * adLinkArray.length);
    var randomChoice = 0;
    
    // show effect and list only for IE5(PC) & Firefox
    if ( ((isIE5plus() && isLAN()) || isFirefox() || isNetscape6or7()) && (adImagePathArray.length > 1) )
    {
        currentAd = randomChoice;
    
        document.writeln("<div id=\"mainAd\" style=\"width:" + adWidth + "px;height:" + adHeight + "px\">";
    
        for (i = 0; i < adImagePathArray.length; i++)
        {
            document.write("<div id=\"ad" + i + "\" style=\"display:";
    
            if (i == randomChoice)
                document.writeln("block\">";
            else
                document.writeln("none\">";
    
            parseLinkImage(adLinkArray, adImagePathArray, adCaptionArray, i);
            
            if (showNav != null)
                parseNav(adImagePathArray);
    
            document.writeln("</div>";
        }
    
        document.writeln("</div>";
    
        adArray = new Array(adImagePathArray.length);
        imageArray = new Array(adImagePathArray.length);
    
        for (i = 0; i < adImagePathArray.length; i++)
        {
            adArray[i]    = document.getElementById("ad" + i).style;
            imageArray[i]    = document.getElementById("image" + i);
        }
    
        mainAd = document.getElementById("mainAd";
        
        runEffect();
    }
        else
    {
        parseLinkImage(adLinkArray, adImagePathArray, adCaptionArray, randomChoice);
        return;
    }
    
}

function isLAN()
{
    try
    {
        document.body.addBehavior ("#default#clientCaps";
        var isLAN = (typeof(document.body.connectionType) != "undefined" && document.body.connectionType == "lan" ? true : false;
        return isLAN
    }
    catch(e)
    {
        return false;
    }
}

function isIE5plus()
{
    var browser = navigator.userAgent;
    var startPos = browser.indexOf("MSIE";
    if (startPos < 0)
        return false;

    var IEversion = parseInt(browser.substring(startPos+5, browser.indexOf(".", startPos)));
    
    if (IEversion < 5)
        return false;
    else
        return true;
}

function isFirefox()
{
    var browser = navigator.userAgent;
    var startPos = browser.indexOf("Firefox";
    if (startPos < 0)
        return false;
    else
        return true;
}

function isNetscape6or7()
{
    var browser = navigator.userAgent;
    var startPosNS6 = browser.indexOf("Netscape6";
    var startPosNS7 = browser.indexOf("Netscape/7";
    
    if ((startPosNS6 >= 0) || (startPosNS7 >= 0))
        return true;
    else
        return false;
}
    
    



浮尘

职务:普通成员
等级:3
金币:7.0
发贴:1258
#32005/6/14 11:40:01
好长,厉害。



hhzvic

职务:普通成员
等级:1
金币:0.0
发贴:3
#42005/6/21 0:53:47
真的好长,.强人,顶!!



水中寒

职务:普通成员
等级:1
金币:0.0
发贴:120
#52005/7/4 18:01:04
顶!!!!!!!!!11