如何解决从屏幕上的按钮迭代数组html
我正在尝试使用屏幕上的按钮移动一个数组，以向前/向后显示图像。但是，我希望轮播功能保持不变（因此，如果我单击它，它将重新启动8s周期，如果我什么也不做，它将继续按原样继续。）
<script>
var myIndex = 0;
carousel();
function carousel()
{
var i;
var x = document.getElementsByClassName("radar");
for (i = 0; i < x.length; i++)
{
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel,8000); // number of seconds
}
</script>
我有内置的屏幕按钮，但不确定如何根据需要向前/向后移动索引。元素“雷达”只是我在显示循环中使用的一系列图像。
解决方法
要维护轮播并允许按钮向前/向后移动，可以使用 clearTimeout 函数清除当前回调，然后将其重置。
当该按钮用于向前移动轮播时，请传递一个标志以重置超时。
尝试以下代码：
<script>
var myIndex = 0;
var timeout = null;
carousel();
function carousel(dir) // dir is null if timeout
{
var i;
var x = document.getElementsByClassName("radar");
for (i = 0; i < x.length; i++)
{
x[i].style.display = "none";
}
myIndex+= dir? dir : 1; //if dir is null,no button click,move carousel forward
if (myIndex > x.length) {myIndex = 1}
if (myIndex < 0) {myIndex = x.length}
x[myIndex-1].style.display = "block";
if (dir) { clearTimeout(timeout); } // button click,clear existing timeout
timeout = setTimeout(carousel,8000); // number of seconds
}
</script>
<body>
<button class="button button1" onclick="carousel(1)" >Next</button>
<button class="button button1" onclick="carousel(-1)">Previous</button>
</body>
所以我遇到了一些困难。我已经按照以下规定定义了按钮：
.button {
border: 2px solid #80ff00
color: white;
width: 100px;
height: 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {
background-color: #808080;
position: absolute;
bottom: 0px;
right: 150px;
} //forward button
如何将其合并到轮播中？我正在尝试利用一个按钮按顺序将轮播向前移动，并使用以下按钮向后一个按钮：
.button2 {
background-color: #808080;
position: absolute;
bottom: 0px;
left: 200px;
}
我试图在代码中创建一个新的div，但是我相信我必须将按钮按下嵌入到实际的轮播功能中，以便迭代前进/后退。我只是对如何合并感到不知所措。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。