在自定义HTML幻灯片中一次显示一张幻灯片

Question

我正尝试让我的幻灯片一次展示一张图像。目前，它会一次显示所有选定的图像。我希望一次显示一张图像，就像在带有上一个/下一个按钮的传统幻灯片中一样。我觉得这真的很简单，而且我想得太多。我看了无数的示例，但是我的问题似乎与大多数情况不同，因为就我而言，每次幻灯片显示都不一样-幻灯片中的图像基于用户选择的输入，因此下一张或上一张幻灯片很可能始终唯一，取决于用户选择的主题。

有人有什么建议吗？这是我所拥有的：

$(document).ready(function() {
  $("#view-content").on("click", function(e) {
    for (var i = 0; i < 20; i++) {
      if ($('#topic' + i).prop('checked')) {
        $('.topic' + i).show();
      } else {
        $('.topic' + i).hide();
      }
    }
  });
});

.column {
  float: left;
  width: 33.33%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

input[type=checkbox] {}

.topic {
  width: 200px;
  height: 3em;
  line-height: 3em;
  background: #ccc;
  border-radius: 50px;
  text-align: center;
  vertical-align: middle;
}

button {
  border-radius: 50px;
  border: none;
  width: 10em;
  height: 3em;
  line-height: 3em;
}

.view {
  display: block;
  margin: 0 auto;
}

.selectall {
  display: none;
}

.slideshow {
  overflow: auto;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Topics</h1>

<h4>Or choose from popular search terms: </h4>
<div class="row">
  <button type="button">term1</button>
  <button type="button">term2</button>
  <button type="button">term3</button>
  <button type="button">term4</button>
  <button type="button">term5</button>
  <button type="button">term6</button>
  <button type="button">term7</button>
  <button type="button">term8</button>
  <button type="button">term9</button>
  <button type="button">term10</button>
</div>

<hr>
<div class="row">
  <div class="column">
    <div class="topic">
      <input type="checkbox" id="topic1" />
      <label for="topic1">Topic 1</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic2" />
      <label for="topic2">Topic 2</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic3" />
      <label for="topic3">Topic 3</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic4" />
      <label for="topic4">Topic 4</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic5" />
      <label for="topic5">Topic 5</label>
    </div>
  </div>
  <div class="column">
    <div class="topic">
      <input type="checkbox" id="topic6" />
      <label for="topic6">Topic 6</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic7" />
      <label for="topic7">Topic 7</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic8" />
      <label for="topic8">Topic 8</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic9" />
      <label for="topic9">Topic 9</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic10" />
      <label for="topic10">Topic 10</label>
    </div>
  </div>
  <div class="column">
    <div class="topic">
      <input type="checkbox" id="topic11" />
      <label for="topic11">Topic 11</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic12" />
      <label for="topic12">Topic 12</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic13" />
      <label for="topic13">Topic 13</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic14" />
      <label for="topic14">Topic 14</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic15" />
      <label for="topic15">Topic 15</label>
    </div>
  </div>
</div>
<br/>
<button type="button" class="view" id="view-content">View Content</button>
<div class="slideshow">
  <img class="topic1 selectall" src="https://i.imgur.com/Kf2zBCB.jpg" />
  <img class="topic2 selectall" src="https://i.imgur.com/Sd44gRr.jpg" />
  <img class="topic3 selectall" src="https://i.imgur.com/5t6Qp5y.jpg" />
  <img class="topic4 selectall" src="https://i.imgur.com/5vyPC7P.jpg" />
  <img class="topic5 selectall" src="https://i.imgur.com/H400nzy.jpg" />
  <img class="topic6 selectall" src="https://i.imgur.com/MXVqtDe.jpg" />
  <img class="topic7 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
  <img class="topic8 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
  <img class="topic9 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
  <img class="topic10 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
  <img class="topic11 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
  <img class="topic12 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
  <img class="topic13 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
  <img class="topic14 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
  <img class="topic15 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
</div>

Answer 1

您可以进行标准的幻灯片显示，而不管只显示一些图像的事实。标记仍然相同-唯一不同的是display: none应用于某些图像。

根据您想要的幻灯片类型，您只需要添加一些箭头，供用户单击第一个图像之前和最后一个图像之后，就可能带有伪类:before:-first-of-type和{{1 }}。

或者，您可以只使用一些额外的JavaScript / jQuery来使工作正常：

:after:last-of-type

这将隐藏所有幻灯片，然后一张一张一张地淡出幻灯片，如下所示：

$(".slideshow > img:gt(0)").hide();

setInterval(function() {
  $('.slideshow > img:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('.slideshow');
}, 3000);

$(document).ready(function() {
  $("#view-content").on("click", function(e) {
    for (var i = 0; i < 20; i++) {
      if ($('#topic' + i).prop('checked')) {
        $('.topic' + i).show();
      } else {
        $('.topic' + i).hide();
      }
    }
    
    $(".slideshow > img:gt(0)").hide();

    setInterval(function() {
      $('.slideshow > img:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('.slideshow');
    }, 3000);
  });
});

.column {
  float: left;
  width: 33.33%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

input[type=checkbox] {}

.topic {
  width: 200px;
  height: 3em;
  line-height: 3em;
  background: #ccc;
  border-radius: 50px;
  text-align: center;
  vertical-align: middle;
}

button {
  border-radius: 50px;
  border: none;
  width: 10em;
  height: 3em;
  line-height: 3em;
}

.view {
  display: block;
  margin: 0 auto;
}

.selectall {
  display: none;
}

.slideshow {
  overflow: auto;
  white-space: nowrap;
}