Javascript 添加更改图像的链接_Javascript_Html_Ajax

Javascript 添加更改图像的链接

javascript html ajax

Javascript 添加更改图像的链接,javascript,html,ajax,Javascript,Html,Ajax,所以我制作了一个显示图像的页面，每隔2秒，图像会在一个数组中使用四个图像进行更改。我还需要能够将每个图像链接到不同的url，但我不知道如何做到这一点，因为我所尝试的一切都没有奏效，任何帮助都将不胜感激 HTML <!DOCTYPE html> <html> <head> <script src = "task6.js"></script> </head> <body onload="ImageChange()

所以我制作了一个显示图像的页面，每隔2秒，图像会在一个数组中使用四个图像进行更改。我还需要能够将每个图像链接到不同的url，但我不知道如何做到这一点，因为我所尝试的一切都没有奏效，任何帮助都将不胜感激

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>

JS:

var-Cntr=2；
var images=新数组（）；
图像[0]=“”；
图像[1]=“”；
图像[2]=“”；
图像[3]=“”；
函数ImageChange（）
{
Cntr=Cntr+1；
如果（Cntr==4）
{
Cntr=0；
}
document.getElementById（“容器”）.innerHTML=images[Cntr]；
setTimeout（“ImageChange（）”，2000）；
}

HTML:

将链接包装在标签中

像这样

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

你可以这样做。在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>

这应该可以做到

标记

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

这就是你要找的吗

<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);
}


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"
}          
]
函数ImageChange（）{
console.log（“Source”+i+：“+document.getElementById（“image”）.src）
如果（i==4）{
i=0；
}
i++；
document.getElementById（“image”）.src=img[i].src；
document.getElementById（“link”）.href=img[i].href；
setTimeout（“ImageChange（）”，2000）；
}

“链接每个图像”如何？你的意思是更新

src

，还是创建一个可以点击的

元素？你可以像处理图像一样，放置一个锚定标记

包装图像标记

。然后在

Javascript

中，您可以创建另一个

array

，其中包含所需的链接，并在处理图像时对其进行更改。为每个图像添加一个超链接，使其成为“a”元素

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);
}

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

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);
}

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

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);
}

<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);
}