Question

。我有一个带缩略图的滑块，我想在我的网站中使用6个相同的滑块。（1行中的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>

HTML

<img height="250" width="500" style="border:3px solid grey" src="images/g1.jpg" id="mainImage" />
<br />

<div id="imgstyle" onclick="changeImage(event)">
<image class="imgstyle" src="images/g1.jpg" />
<image class="imgstyle" src="images/g2.jpg" />
<image class="imgstyle" src="images/g3.jpg" />
 <image class="imgstyle" src="images/g4.jpg" />
 <image class="imgstyle" src="images/g5.jpg" />
</div>

CSS

* {
 box-sizing: border-box;
}
.imgstyle {
display: block;
  float: left;
  width: 100px;
}

.imgstyle + .imgstyle {
  border-left: 1px solid;
}

Answer 1

我确定你的问题会从改写中受益，因为目前很难理解你想要实现的目标。无论如何，如果我理解正确并且你想要有两行缩略图而不是一行，这是我的建议。

由于您在缩略图图像上使用float，因此需要清除浮动以将图像强制转换为新行。使用clear: both可以轻松完成此操作。您需要以下两种方法之一：

CSS规则以切断 nth 图片。如果您希望所有行具有相同数量的图像，请使用此选项。

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

nth-of-type(3n+1)选择器将应用于第一个，第四个，第七个等元素，并清除它前面的float属性。这会强制以下内容从新行开始。

CSS rule Codepen

HTML元素，可手动切断您想要的位置。通过在图像HTML代码之间添加以下元素，您可以准确指定换行符的位置。

<强> HTML：

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

<强> CSS：

.break {
  clear: both;
}

同样，如果这不是您想要答案的问题，我建议您重新提出问题，以便更清晰。

我想在我的网站中使用相同的6个滑块

1 个答案: