javascript - 在自定义 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 和 :after:last-of-type。

或者，您可以使用一些额外的 JavaScript/jQuery 来让事情正常进行:

$(".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;
}

<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>