如何将锚标记单个项目设置为数组图像

Question

我在特定div中添加了动态图像显示，但我无法单独为每个图像设置链接（a href）。你能帮我吗？ 这是我使用但不工作的脚本：

<script>
var i;
var timerid = 0;
var images = ["img1.jpg",
            "img2.jpg",
            "img3.jpg","img4.jpg"];


var countimages = 0;
function startTime()
{
    if(timerid)
    {
        timerid = 0;
    }
    var tDate = new Date();

    if(countimages == images.length)
    {
        countimages = 0;
    }
    if(tDate.getSeconds() % 4 == 0)
    {
        document.getElementById("img1").src = images[countimages];
    }
    countimages++;
    timerid = setTimeout("startTime()", 800);
    switch(countimages){
        case images[0]: images[0].setAttribute('href',"dhow-cruise-creek-dubai.html");
        images[0].innerHTML="dhow-cruise-creek-dubai.html";
            document.appendChild(images[0]);
            break;
        case images[1]:  images[1].setAttribute('href',"dhow-cruise-creek-dubai.html");
        images[1].innerHTML="dhow-cruise-creek-dubai.html";
            document.appendChild(images[1]);
            break;
            case images[2]: images[2].setAttribute('href',"dhow-cruise-creek-dubai.html");
        images[2].innerHTML="dhow-cruise-creek-dubai.html";
            document.appendChild(images[2]);
            }

}
</script> 

Answer 1

这里有几件事：

1：您的函数正在递增数组索引（countimages）并在它到达要下标的数组的索引范围的末尾时将其包装（{{1 }}）。您目前有两行代码来完成此任务，这些代码由另一行代码分隔。这两行是

images

在上述数组的下标之后立即执行，

countimages++;

在之前只执行。

在人类可读性和代码简单性方面，将这两个操作定位在代码中的相同位置会好得多，因为它们共同代表了一个孤立且不可分离的动作。此外，可以使用模数运算更加惯用和简洁地应用长度上限。最终的结果是你应该删除我上面显示的第二行，并将第一行更改为：

if (countimages == images.length) countimages = 0;

2：您在每次评估函数时都会递增countimages = (countimages+1)%images.length; 。即使模数测试失败也会发生这种情况，因此图像不会改变。我怀疑这是一个错误。因此我会改变

countimages

到

if (tDate.getSeconds()%4 == 0) {
    document.getElementById("img1").src = images[countimages];
}
countimages = (countimages+1)%images.length;

3：我没有看到在函数开头将if (tDate.getSeconds()%4 == 0) { document.getElementById("img1").src = images[countimages]; countimages = (countimages+1)%images.length; } 变量置零的任何一点。它将不可避免地被函数后面的timerid调用的返回值覆盖。声明

setTimeout()

应该删除。

4： setTimeout()函数支持两个重载。函数的第一个参数可以是函数引用或代码字符串。出于性能和安全原因，前者是优选的。所以你应该改变

if (timerid) timerid = 0;

到

timerid = setTimeout('startTime()',800);

但请参见下文。

5：对于连续重复的函数调用，setInterval()函数优于timerid = setTimeout(startTime,800); 。在这种设计下，该函数甚至不需要引用setTimeout()，也不需要关注自己的调用。我们可以在页面加载期间调用timerid一次以启动调用链。

6：函数末尾的switch语句正在对文字指定的setInterval()数组的各个元素开启countimages数字类型索引，即images，images[0]和images[1]。 images[2]数组包含表示图像URL的字符串值，而不是数字。显然这个switch语句是不正确的。此外，省略了最后一个元素（images），这可能是一个错误。如果您打算打开数组的索引，则您的案例值应为images[3]，0等。但请参阅下文。

7：除了文字索引之外，switch语句中的每个case分支都与其他分支相同。也就是说，它们都遵循这种模式，其中1是文字索引：

i

除了最终案例分支中缺少最终的case images[i]: images[i].setAttribute('href','dhow-cruise-creek-dubai.html'); images[i].innerHTML = 'dhow-cruise-creek-dubai.html'; document.appendChild(images[i]); break; 语句。

这是重复代码的一个例子，应该通过适当的参数化来简化;在这种情况下，参数化break;。观察到文字索引始终对应于i的当前值，因此这是我们的countimages。换句话说，假设您想要打开数组的索引，整个switch语句可以替换为以下内容：

i

但请参见下文。

8：以上代码行不正确，因为它们似乎将images[countimages].setAttribute('href','dhow-cruise-creek-dubai.html'); images[countimages].innerHTML = 'dhow-cruise-creek-dubai.html'; document.appendChild(images[countimages]); 视为元素数组，而实际上它是一个字符串数组。你不能在一个字符串上调用setAttribute()，也没有一个有意义的innerHTML字符串属性，并且你不能使用appendChild()将字符串附加到DOM树（因为字符串不实现接口{ {1}}）。

这将我们带到你的问题。您的代码似乎试图在每次图像前进时在整个文档的底部附加一个新的锚链接元素，但我怀疑这是您真正想要的。我猜你想要将一个固定的锚链接元素推进到与新图像对应的新images属性和Node内容。为此，我建议您将字符串数组更改为哈希数组，并使用三个键/值对将href和innerHTML存储在图像URL旁边。

9：在每4秒钟内推进图像和链接的设计，但每800毫秒检查一次这样的情况，是非常值得怀疑的。在某些情况下，检查将在4秒的倍数内为真两次，在某些情况下，在4秒的倍数期间只会检测一次。并且函数执行的时刻会漂移，因为间隔持续时间不能保证精确。这会导致一些奇怪的行为。我想你可能想要这种行为，但我很怀疑。相反，我怀疑你的目标是图像和链接每4秒前进一次。您可以通过删除整个时间测试并将间隔设置为4秒（即4000毫秒）来实现此目的。

因此，我们有：

＆＃13;

＆＃13;

href

＆＃13;

innerHTML

＆＃13;

var imageSpecs = [
    {imageURL:'https://www.gravatar.com/avatar/8062178f34c7107a67ef00b681921287?s=328&d=identicon&r=PG&f=1',linkRef:'#1',innerHTML:'one'  },
    {imageURL:'https://www.gravatar.com/avatar/b57bf879dbb25c837c2e2ae730cab2cc?s=328&d=identicon&r=PG&f=1',linkRef:'#2',innerHTML:'two'  },
    {imageURL:'https://www.gravatar.com/avatar/166ed38dafa219c53980bb06cfce40b6?s=328&d=identicon&r=PG&f=1',linkRef:'#3',innerHTML:'three'},
    {imageURL:'https://www.gravatar.com/avatar/0c8ea1549ebeff7bab9a282c4b965fa4?s=328&d=identicon&r=PG',    linkRef:'#4',innerHTML:'four' },
];

// preload all images
for (let imageSpec in imageSpecs) {
  let img = new Image();
  img.src = imageSpec.imageURL;
} // end for

var nextImageSpecIndex = 0;
function advanceImageSpec() {

    let imageSpec = imageSpecs[nextImageSpecIndex];

    let imgElem = document.getElementById('img1');
    imgElem.setAttribute('src',imageSpec.imageURL);

    let linkElem = document.getElementById('link1');
    linkElem.setAttribute('href',imageSpec.linkRef);
    linkElem.innerHTML = imageSpec.innerHTML;

    nextImageSpecIndex = (nextImageSpecIndex+1)%imageSpecs.length;

} // end advanceImageSpec()

var timerId = setInterval(advanceImageSpec,4000);
advanceImageSpec(); // immediate call to display first image immediately

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不确定你要做什么，但我认为你希望图像成为某个地方的链接。尝试在id为img1的img元素周围添加一个链接标记，并为该链接标记提供id`link1'，如下所示：

<a href="" id="link1"><img id="img1"/></a>

然后将脚本更改为：

<script>
var i;
var timerid = 0;
var images = ["img1.jpg",
            "img2.jpg",
            "img3.jpg"];

var links = ["dhow-cruise-creek-dubai.html",
            "dhow-cruise-creek-dubai.html",
            "dhow-cruise-creek-dubai.html"];

var countimages = 0;
function startTime()
{
    if(timerid)
    {
        timerid = 0;
    }
    var tDate = new Date();

    if(countimages == images.length)
    {
        countimages = 0;
    }
    if(tDate.getSeconds() % 4 == 0)
    {
        document.getElementById("link1").href = links[countimages];
        document.getElementById("img1").src = images[countimages];
    }
    countimages++;
    timerid = setTimeout("startTime()", 800);
}
</script> 

还有更多可以改进，但我相信你会到达我要去的地方。