Javascript 我想在我的站点中使用相同的6滑块

。我有一个带缩略图的滑块，我想在我的站点中使用6个相同的滑块。（一行中的3个滑块打断另一行中的3个滑块）当我复制粘贴html时，它不起作用。只有前1个滑块起作用

 <script>`
function changeImage(event) {`
event = event || window.event;
var targetElement = event.target || event.srcelement;
if (targetElement.tagName == "IMG") {
document.getElementById("mainImage").src = targetElement.getAttribute("src");
   }
}
</script>

---

我相信你的问题将受益于重新措辞，因为目前很难理解你想要实现的目标。不管怎样，如果我理解正确，并且您希望有两行缩略图图像而不是一行，下面是我的建议

由于在缩略图上使用的是

float

，因此需要清除该float以强制将图像放到新行上。使用

清除：两个
最容易做到这一点。您将需要两件事中的一件：

CSS规则在第n个图像处切断。如果希望所有行具有相同数量的图像，请使用此选项

.imgstyle:nth-of-type(3n + 1) {
  clear: both;
}

类型（3n+1）的第n个选择器将应用于第一个、第四个、第七个等元素，并清除其前面的float属性。这将强制以下内容从新行开始


一个HTML元素，用于手动切断所需位置。通过在图像HTML代码之间添加以下元素，可以精确指定换行符的位置

HTML:

<div class="break"></div>

.break {
  clear: both;
}

同样，如果这不是您想要回答的问题，我建议您重新表述您的问题，以便更清晰。
不，我不想要两个缩略图。我想要在相反的站点中使用相同的滑块。这意味着第一个1在左侧，另一个在右侧。您能想出一个图像来澄清您想要的内容吗？不幸的是，我发现你的描述很难理解。我添加了一张我想要的图片。你能帮我吗
<div class="break"></div>

.break {
  clear: both;
}