文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >在自定义HTML幻灯片中一次显示一张幻灯片

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

Stack Overflow用户
提问于 2018-07-25 08:23:34
回答 1查看 171关注 0票数 0

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

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

​

代码语言：javascript
复制
$(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();
      }
    }
  });
});
代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

javascript
jquery
html
css
EN

回答 1

Stack Overflow用户

发布于 2018-07-25 08:31:41

你有一个标准的幻灯片放映，而不考虑只显示一些图像的事实。标记仍然是相同的--唯一的区别是将display: none应用于某些图像。

根据您想要的幻灯片类型，您只需要在第一张图片之前和最后一张图片之后添加一些箭头供用户单击，可能会使用伪类:before:-first-of-type和:after:last-of-type。

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

代码语言：javascript
复制
$(".slideshow > img:gt(0)").hide();

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

它将隐藏所有幻灯片，然后一个接一个地在幻灯片中淡出，可以在下面看到：

​

代码语言：javascript
复制
$(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);
  });
});
代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51509257

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档