Question

我是JavaScript的新手，目前正在尝试创建一个页面：
1）在一段时间内不断循环每个div。
2）只有选中的div才会有“选中”类。
3）所选类的data-url放在div下面的iframe的src中。

这是我的示例html。

<div class="content selected" data-url="">
   Website 1
</div>
<div class="content" data-url=""> 
   Website 2
</div>
<div class="content" data-url="">
   Website 3
</div>
<div class="content" data-url="">
   Website 4 
</div>
<iframe id="iframe-container" src="" />

似乎大多数循环解决方案都是隐藏和显示div。有没有办法使用循环功能并添加更多代码，使其按我的意愿行事？

Answer 1

var sites = document.querySelectorAll('[data-url]');
var frame = document.querySelector('iframe');
var index = 0;

function moveAlong() {
    sites.item(index).classList.remove("selected");
    index++;
    if (index >= sites.length) index = 0;
    sites.item(index).classList.add("selected");
    frame.src = sites.item(index).dataset.url;
}

setInterval(moveAlong, 3000);

body {
  font-family: sans-serif;
}
.selected {
  color: red;
}
iframe {
  border: none;
}

<div class="selected" data-url="http://example.com">
  Website 1
</div>
<div data-url="http://www.w3schools.com">
  Website 2
</div>
<div data-url="http://wikipedia.org">
  Website 3
</div>
<iframe src="http://example.com"></iframe>

JS - 创建具有定时间隔的循环函数

1 个答案: