我有一个幻灯片工作来改变图像,但是我如何为每个图像添加一个单独的html页面链接

时间:2015-03-11 13:37:15

标签: javascript jquery html css

var index=0;
var titles=[1,2,3,4];

function moveToNextSlide()
{
if (index >= 4){index=0}
var img = document.getElementById("img1");
var slideName="images/img" + titles[++index] + ".jpg";
img.src=slideName;
}

function moveToPreviousSlide()
{
    if (index <= 0){index=4}
    {
        var img = document.getElementById("img1");
        var slideName="images/img" + titles[--index] + ".jpg";
        img.src=slideName;
    }
}

这是我幻灯片的javascript代码,在我的html中,我使用输入按钮下一步返回来调用图像更改。

如何添加随机html链接,以便在点击图片时进入不同的html页面?

1 个答案:

答案 0 :(得分:0)

<img>标记包围在<a>内,如下所示:

<a href="http://www.example.com" id="link1"><img id="img1" src="images/img1.jpg"></a>

现在在这两个方法中添加代码以相应地更新标记的href。

 var urls=["http://www.example.com","http://www.example2.com","http://www.example3.com","http://www.example4.com"];
function moveToNextSlide()
{
if (index >= 4){index=0}
var img = document.getElementById("img1");
var slideName="images/img" + titles[++index] + ".jpg";
img.src=slideName;
var link= document.getElementById("link1");
var url=urls[++index];
link.href=url;
}

function moveToPreviousSlide()
{
if (index <= 0){index=4}
{
var img = document.getElementById("img1");
var slideName="images/img" + titles[--index] + ".jpg";
img.src=slideName;
var link= document.getElementById("link1");
var url=urls[++index];
link.href=url;
}
}

试着告诉。