Question

所以我正在创建一个显示图像的页面，每隔2秒，图像会在阵列中使用四个图像进行更改。我还需要能够将每个图像链接到不同的网址，但是我不知道如何做到这一点，因为我尝试过的一切都没有用，非常感谢任何帮助。

HTML

<!DOCTYPE html>
<html>
<head> 
    <script src = "task6.js"></script>
</head>
<body onload="ImageChange()">
<div align="center">
<img src="images/image2.png" id="image" height="200" width="200">
</div>
</body>
</html>

的Javascript

var Cntr = 2;

var images = new Array();
images[0] = "images/image1.png";
images[1] = "images/image2.png";
images[2] = "images/image3.png";
images[3] = "images/image4.png";

function ImageChange()
{
Cntr= Cntr+1;
if (Cntr==4)
{
    Cntr=0;
}
document.getElementById("image").src=images[Cntr];
setTimeout("ImageChange()", 2000);
}

Answer 1

JS：

var Cntr = 2;

var images = new Array();
images[0] = "<a href=\"http://google.com/\"><img src=\"images/image1.png\" height=\"200\" width=\"200\"></a>";
images[1] = "<a href=\"http://bing.com/\"><img src=\"images/image2.png\" height=\"200\" width=\"200\"></a>";
images[2] = "<a href=\"http://facebook.com/\"><img src=\"images/image3.png\" height=\"200\" width=\"200\"></a>";
images[3] = "<a href=\"http://stackoverflow.com/\"><img src=\"images/image4.png\" height=\"200\" width=\"200\"></a>";

function ImageChange()
{
Cntr= Cntr+1;
if (Cntr==4)
{
    Cntr=0;
}
document.getElementById("container").innerHTML=images[Cntr];
setTimeout("ImageChange()", 2000);
}

HTML：

<!DOCTYPE html>
<html>
<head> 
    <script src = "task6.js"></script>
</head>
<body onload="ImageChange()">
<div align="center">
<div id="container"></div>
</div>
</body>
</html>

Answer 2

在A标签中包裹您的链接

喜欢这个

<a href="" id="mylink"><img src="images/image2.png" id="image" height="200" width="200"></a>

并更改您的javascript，如下所示。

var Cntr = 2;

var images = new Array();
images[0] = "images/image1.png";
images[1] = "images/image2.png";
images[2] = "images/image3.png";
images[3] = "images/image4.png";

var links = new Array();
links[0] = "link1";
links[1] = "link2";
links[2] = "link3";
links[3] = "link4";

function ImageChange()
{
Cntr= Cntr+1;
if (Cntr==4)
{
    Cntr=0;
}
document.getElementById("image").src=images[Cntr];
document.getElementById("mylink").href=links[Cntr];
setTimeout("ImageChange()", 2000);
}

Answer 3

你可以这样做。在html中，

<body onload="ImageChange()">
<div align="center">
    <a href="www.gotoone.com" id="link">
        <img src="images/image1.png" id="image" height="200" width="200">
    </a>
</div>

在javascript中，

var Cntr = 2;

var images = [
    {img : "images/image1.png", link : 'www.gotoone.com'},
    {img : "images/image2.png", link : 'www.gotootwo.com'},
    {img : "images/image3.png", link : 'www.gotothree.com'},
    {img : "images/image4.png", link : 'www.gotofour.com'},
];


function ImageChange()
{
    Cntr= Cntr+1;
    if (Cntr==4)
    {
        Cntr=0;
    }

    document.getElementById("image").src=images[Cntr].img;
    document.getElementById("link").href=images[Cntr].link;
    setTimeout("ImageChange()", 2000);
}

Answer 4

这应该这样做。

<强>标记

<!DOCTYPE html>
<html>
<head> 
    <script src = "task6.js"></script>
</head>
<body onload="ImageChange(0)">
<div align="center">
    <a id="yourLink" href="http::// www.google.com">
        <img src="img/google.png" />
    </a>
</div>
</body>
</html>

<强>的JavaScript

var link = document.getElementById("yourLink"),
    image = link.getElementsByTagName("img")[0],
    images = [{
        image: 'url1.png', href: 'url1.com'
    }, {
        image: 'url2.png', href: 'url2.com'
    }, {
        image: 'url3.png', href: 'url3.com'
    }, {
        image: 'url4.png', href: 'url4.com'
    }];

function ImageChange(target) {
    link.href = images[target].href;
    image.src = images[target].image;
    window.setTimeout(function() {
        ImageChange(++target%image.length);
    }, 2000);
}

Answer 5

这是你在找什么？

<强> EXAMPLE

<body onload="ImageChange()">
    <div>
        <a id="link" target="_blank" href="http://www.google.com">
            <img src="http://www.picturesnew.com/media/images/Austin-Healey-Photo.jpg" id="image" height="200" width="200"/>
        </a>    
    </div>
</body>


var i = 0;
var img = [
    {
        src:"http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg",
        href:"http://www.google.com"
    },
    {
        src:"http://www.picturesnew.com/media/images/cool-images.jpg",
        href:"http://www.google.com"
    },
    {
        src:"http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg",
        href:"http://www.google.com"
    },
    {
        src:"http://www.picturesnew.com/media/images/images-background.jpg",
        href:"http://www.google.com"
    },
    {
        src:"http://blog.gettyimages.com/wp-content/uploads/2013/01/Simple-Living-Rhiannon-Llewelyn-Taxi-Getty-Images-81938225.jpg",
        href:"http://www.google.com"
    }          
]

function ImageChange(){
    console.log("Source " + i + " : " +document.getElementById("image").src)

    if (i==4){
        i=0;
    }
    i++;
    document.getElementById("image").src=img[i].src;
    document.getElementById("link").href=img[i].href;
    setTimeout("ImageChange()", 2000);
}

添加指向更改图像的链接

5 个答案: