一行中相同的滑块

Question

我有一个滑块，我想在同一行中使用相同的另一个。我想附上一张想要完全做的图片。没有问题我的滑块工作得很好。

这就是我想要做的。

    <script>    
    function changeImage(event, a) {
  event = event || window.event;
  var targetElement = event.target || event.srcelement;
  if (targetElement.tagName == "IMG") {
    document.getElementsByClassName("mainImage")[a].src  = targetElement.getAttribute("src");
   }
  }

</script>   

HTML

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

<div id="imgstyle" onclick="changeImage(event, 0)">
  <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>
<br /><br /><br /><br />


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

<div id="imgstyle" onclick="changeImage(event, 1)">
  <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

'Sliders'不应与任何其他HTML元素有任何不同。 https://jsfiddle.net/sheriffderek/gbuk3qbe/

有许多方法可以并排放置，但这里有一个：

标记

<section class="section-name">
  <div class="thing one">one</div>

  <div class="thing two">two</div>
</section>

样式

.section-name {
  display: flex;
  flex-direction: row;
}

.section-name .thing {
  flex-basis: 50%;
  border: 1px solid black;
}

Answer 2

我认为这是使用css网格的好例子。您希望图像块并排。添加父div元素并为每个块提供其自己的单独div并使用此css：

.parent {
  display: grid;
  grid-template-columns: auto;

}
.child {
  grid-row: 1;
}

如果您希望它具有响应性，则需要添加媒体查询，但您可以在此处查看库存图片。  https://jsfiddle.net/n38uu1t3/

Answer 3

问题是您是以像素为单位设置尺寸，因此当窗口尺寸较小时，滑块将始终低于彼此。您需要的解决方案必须使用基于百分比的相对尺寸。请参阅下面的代码片段。我使用float:left并排排列。我正在为父级添加一个clearfix，以便保留维度。阅读更多here

注意：当您为电影和平板电脑屏幕进行设计时，如果您将滑块设置在另一个下方，则效果会更好，因此您可以使用媒体查询并将滑块的宽度设置为100％

function changeImage(event, a) {
  event = event || window.event;
  var targetElement = event.target || event.srcelement;
  if (targetElement.tagName == "IMG") {
    document.getElementsByClassName("mainImage")[a].src = targetElement.getAttribute("src");
  }
}

* {
  box-sizing: border-box;
}

.imgstyle {
  display: block;
  float: left;
  width: 20%;
}

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

.slider {
  width: 50%;
  border: 1px solid black;
  float: left;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

* html .clearfix {
  zoom: 1;
}


/* IE6 */

*:first-child+html .clearfix {
  zoom: 1;
}


/* IE7 */

<div class="clearfix">
  <div class="slider">
    <img height="250" width="100%" style="border:3px solid grey" src="http://via.placeholder.com/500x250" class="mainImage">
    <br />

    <div id="imgstyle" onclick="changeImage(event, 0)">
      <image class="imgstyle" src="http://via.placeholder.com/500x250" />
      <image class="imgstyle" src="http://via.placeholder.com/500x250" />
      <image class="imgstyle" src="http://via.placeholder.com/500x250" />
      <image class="imgstyle" src="http://via.placeholder.com/500x250" />
      <image class="imgstyle" src="http://via.placeholder.com/500x250" />
    </div>
  </div>

  <div class="slider">
    <img height="250" width="100%" style="border:3px solid grey" src="http://via.placeholder.com/500x250" class="mainImage">
    <br>

    <div id="imgstyle" onclick="changeImage(event, 1)">
      <image class="imgstyle" src="http://via.placeholder.com/500x250" width="20%" />
      <image class="imgstyle" src="http://via.placeholder.com/500x250" width="20%" />
      <image class="imgstyle" src="http://via.placeholder.com/500x250" width="20%" />
      <image class="imgstyle" src="http://via.placeholder.com/500x250" width="20%" />
      <image class="imgstyle" src="http://via.placeholder.com/500x250" width="20%" />
    </div>
  </div>

</div>