Question

我正在尝试为网站创建一个模块，我需要左右移动图像列表，而所有图像都在同一个容器框中。下面是我试图使用的虚拟代码。

＆＃13;

$(document).ready(function() {
  $("#nex").on("click", function() {
    var inpData = document.getElementsByClassName("boxh").length;
    var temp = 6;
    for (var counter = 0; counter < inpData; counter++) {
if(counter < 6 )
 {
      document.getElementsByClassName("boxh")[counter].style.display = "none";
      document.getElementsByClassName("boxh") [temp].style.display = "block";
      temp++;
  }
    }
  });

});

＆＃13;

#container {
  width: 100%;
  display: inline-block;
  overflow: hidden;
}
button {
  position: relative;
  top: 10px;
}
.box {
  width: 200px;
  height: 200px;
  float: left;
}
.boxh {
  width: 200px;
  height: 200px;
  float: left;
}
#b1 {
  background-color: coral;
  position: relative;
  left: 10px;
}
#b2 {
  background-color: blue;
  position: relative;
  left: 20px;
}
#b3 {
  background-color: coral;
  position: relative;
  left: 25px;
}
#b4 {
  background-color: coral;
  position: relative;
  left: 30px;
}
#b5 {
  background-color: coral;
  position: relative;
  left: 35px;
}
#b6 {
  background-color: coral;
  position: relative;
  left: 40px;
}
#b7 {
  background-color: coral;
  position: relative;
  display: none;
}
#b8 {
  background-color: coral;
  display: none;
}
#b9 {
  background-color: coral;
  display: none;
}
#b10 {
  background-color: coral;
  display: none;
}
#b11 {
  background-color: coral;
  display: none;
}
#b12 {
  background-color: rebeccapurple;
  display: none;
}
#b13 {
  background-color: rebeccapurple;
  display: none;
}
#b14 {
  background-color: rebeccapurple;
  display: none;
}
#b15 {
  background-color: rebeccapurple;
  display: none;
}
#b16 {
  background-color: rebeccapurple;
  display: none;
}
#b17 {
  background-color: rebeccapurple;
  display: none;
}
#b18 {
  background-color: rebeccapurple;
  display: none;
}
#b19 {
  background-color: rebeccapurple;
  display: none;
}
#b20 {
  background-color: rebeccapurple;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<title>Code</title>

<body>
  <div id="container">
    <div class="boxh" id="b1">Box 1</div>
    <div class="boxh" id="b2">Box 2</div>
    <div class="boxh" id="b3">Box 3</div>
    <div class="boxh" id="b4">Box 4</div>
    <div class="boxh" id="b5">Box 5</div>
    <div class="boxh" id="b6">Box 6</div>
    <div class="boxh" id="b7">Box 7</div>
    <div class="boxh" id="b8">Box 8</div>
    <div class="boxh" id="b9">Box 9</div>
    <div class="boxh" id="b10">Box 10</div>
    <div class="box" id="b11">Box 11</div>
    <div class="box" id="b12">Box 12</div>
    <div class="box" id="b13">Box 13</div>
    <div class="box" id="b14">Box 14</div>
    <div class="box" id="b15">Box 15</div>
    <div class="box" id="b16">Box 16</div>
    <div class="box" id="b17">Box 17</div>
    <div class="box" id="b18">Box 18</div>
    <div class="box" id="b19">Box 19</div>
    <div class="box" id="b20">Box 20</div>
  </div>


  <button id="pre">Previous</button>
  <button id="nex">Next</button>

</body>

</html>

＆＃13;

要求是，只需点击下一个按钮，ID为 b1 的Box就会获得

的css属性

显示：无

同时ID b7 的框应该获得

的css属性

显示：块

因此，当用户点击 每次单击框，其中ID为 b1，b2，b3时，它会像来回一样来回运作，b4 等将获得

的css属性

display：none

同时所有来自id b7，b8，b9，b10 等的方框都将获得

的css属性

显示：阻止

我也为前一个按钮写了相同的代码，我为下一个写了但是因为在两种情况下逻辑相同，如果有人可以帮助我任何一个，另一个很容易想出来。只需要注意的是，它应该与 每次单击按钮 一起使用，每次单击一个框应该消失，其他框出现。

PS：在上面的示例中，框表示图像

如何将图像块左右移动，前提是它们位于同一个容器中

0 个答案: