javascript - 无需大量剪切和粘贴的多张幻灯片

Question

我有这个幻灯片(我修改了一些代码 origional source )

这是一个 jsfiddle 链接:

Full source here

CSS 看起来是硬编码的，因此如果我尝试在同一页面上显示两个不同的幻灯片，那么我会遇到问题，即第二个幻灯片的按钮控制第一个幻灯片。

有什么方法可以修改内容以允许在网页上放映多个单独的幻灯片吗？

HTML 片段:

<div id="slideshow-wrap">
    <input type="radio" id="button-1" name="controls" checked="checked"/>
    <label for="button-1"></label>

CSS 片段:

#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: rgba(100,100,100,1) }

Answer 1

您使用的 slider 是我在 2012 年使用的第一个 slider 。非常酷。但是，我强烈建议您查看 Responsiveslides.js - 它 super 棒，我在需要 slider 时随时使用它。根据你的情况，它可能需要更多的样式，但它确实是可行的，我已经检查过 - 它的 slider 足够具体，不会相互踩到。 a fiddle with 2 sliders as an example:

HTML

非常简单的标记。无论您想在列表项中添加什么。

<ul class="rslides">
    <li><img src="http://placekitten.com/300/150-1" alt="" /></li>
    <li><img src="http://placekitten.com/300/150-2" alt="" /></li>
    <li><img src="http://placekitten.com/300/150-3" alt="" /></li>
</ul>

CSS

Base css 也很简单——而且有一些主题。这样你就可以完全控制

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
}

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
}