javascript - 添加指向数组中图像的链接

Question

我正在尝试添加指向 JS 数组中图像的链接，以便在单击时将您引导至信息页面。

我尝试使用以下代码，但图像无法显示。

var WorkArray = new Array(['work/01.png',"http://www.stackoverflow.com"],
                         ['work/02.png',"http://www.stackoverflow.com"],
                         ['work/03.png',"http://www.stackoverflow.com"],
                         ['work/04.png',"http://www.stackoverflow.com"]);

如果我删除图像确实显示的链接。

我正在使用此代码的变体:http://bouncingdvdlogo.com/

这是我的完整代码:

var width = 400;
var height = 400;
var swoosh = 4;
var stopafter=0; //set time in seconds before image disappears. Use 0 for never

var maxswoosh = 50;
var xMax;
var yMax;
var xPos = 0;
var yPos = 0;
var xDir = 'right';
var yDir = 'down';
var screenSavouring = true;
var tempswoosh;
var newXDir;
var newYDir;

function setupShit() {
    if (document.all) {
        xMax = document.body.clientWidth
        yMax = document.body.clientHeight
        document.all("work").style.visibility = "visible";
        }
    else if (document.layers||document.getElementById) {
        xMax = window.innerWidth-0;
        yMax = window.innerHeight;
        if (document.getElementById)
        document.getElementById("work").style.visibility="visible"
        else
        document.layers["work"].visibility = "show";
    }
    setTimeout('moveIt()',500);
    }


function moveIt() {
if (screenSavouring == true) {
calculatePosition();
if (document.all) {
document.all("work").style.left = xPos + document.body.scrollLeft;
document.all("work").style.top = yPos + document.body.scrollTop;
}
else if (document.layers) {
document.layers["work"].left = xPos + pageXOffset;
document.layers["work"].top = yPos + pageYOffset;
}
else if (document.getElementById) {
document.getElementById("work").style.left = xPos + pageXOffset;
document.getElementById("work").style.top = yPos + pageYOffset;
}
doit=setTimeout('moveIt()',30);
}
}

function calculatePosition() {
    if (xDir == "right") {
        if (xPos > (xMax - width - swoosh)) { 
        xDir = "left";
        cC();
        }
    }
    else if (xDir == "left") {
        if (xPos < (0 + swoosh)) {
        xDir = "right";
        cC();
        }
    }
    if (yDir == "down") {
        if (yPos > (yMax - height - swoosh)) {
        yDir = "up";
        cC();
        }
    }
    else if (yDir == "up") {
        if (yPos < (0 + swoosh)) {
        yDir = "down";
        cC();
        }
    }
    if (xDir == "right") {
        xPos = xPos + swoosh;
        }
    else if (xDir == "left") {
        xPos = xPos - swoosh;
        }
    else {
        xPos = xPos;
        }
    if (yDir == "down") {
        yPos = yPos + swoosh;
        }
    else if (yDir == "up") {
        yPos = yPos - swoosh;
        }
    else {
        yPos = yPos;
        }
    }

if (document.all||document.layers||document.getElementById){
window.onload = setupShit;
window.onresize = new Function("window.location.reload()");
}

var WorkArray = new Array(['work/01.png',"http://www.stackoverflow.com", "Your text goes here"],
                             ['work/02.png',"http://www.stackoverflow.com", "Your text goes here"],
                             ['work/03.png',"http://www.stackoverflow.com", "Your text goes here"],
                             ['work/04.png',"http://www.stackoverflow.com", "Your text goes here"]);


var nelements = WorkArray.length;

preload_image_object = new Image();
    var i = 0;
    for(i=0; i<=nelements; i++)  {
    preload_image_object.src = WorkArray[i];
    }

var currentImage = 0

function cC() {
    currentImage = (currentImage + 1) % WorkArray.length;
    document.getElementById("work").style.backgroundImage="url('"+WorkArray[currentImage]+"')";
}

谢谢!

Answer 1

尝试用下面的内容替换 for 循环

for(i=0; i<nelements; i++)  {
preload_image_object.src = WorkArray[i][0];
}

同时将函数 cC() 替换为以下内容:

function cC() {
    var nelements = WorkArray.length;
    var rdmnum = Math.floor(Math.random() * nelements);
    var currentImage = rdmnum++;
    if (currentImage == nelements) {
        rdmnum = Math.floor(Math.random() * nelements);
    }
    currentImage = (currentImage + 1) % WorkArray.length;
    document.getElementById("work").style.backgroundImage = "url('" + WorkArray[currentImage][0] + "')";
}