如何使用jQuery / CSS3创建“幻灯片库面板”？

使用所谓的无线电技巧，这实际上非常简单。您只能使用html和CSS（平滑过渡的CSS3）来完成此操作，这非常有用，因为jquery代表客户端下载的很大一部分。

基本上就是这样（这里的工作示例：http : //codepen.io/anon/pen/jcgxI）：

的HTML

我们使用一组单选输入来确定应显示哪个“标签”。收音机在这里很完美，因为当一个选中时，所有其他都必须取消选中。因此，请确保您的整个属性集NAME相同。

    <input type="radio" name="radio-set" id="radio-1" checked="checked"/>
    <input type="radio" name="radio-set" id="radio-2"/>
    <input type="radio" name="radio-set" id="radio-3"/>
    <input type="radio" name="radio-set" id="radio-4"/>

然后，我们将内容真正包裹在任何标签中（结构部分>文章似乎很合适）。导航，即使可以通过单击单选按钮本身完成，也可以通过单击引用任何输入的标签来完成，这些标签通过其属性FOR设置为所引用对象的ID。

<section>
    <article id="article-1">
        <h2>article 1</h2>
        <label for="radio-4"></label>
        <label for="radio-2"></label>
    </article>
    <article id="article-2">
        <h2>article 2</h2>
        <label for="radio-1"></label>
        <label for="radio-3"></label>
    </article>
    <article id="article-3">
        <h2>article 3</h2>
        <label for="radio-2"></label>
        <label for="radio-4"></label>
    </article>
    <article id="article-4">
        <h2>article 4</h2>
        <label for="radio-3"></label>
        <label for="radio-1"></label>
    </article>
</section>

的CSS

因为我们将使用易于样式化的标签进行导航，所以我们只需隐藏输入本身即可。

input{ display:none; }

将所有文章并排放置。

article{
    position:absolute;
    width:100vw;
}
article:nth-of-type(1){ left: 0    }
article:nth-of-type(2){ left: 100% }
article:nth-of-type(3){ left: 200% }
article:nth-of-type(4){ left: 300% }

我在标签中添加了“箭头”（在实际设计中，只需单击一下即可，将这些字符切换为字体图标）。

label:first-of-type::before{content: "<"}
label:last-of-type::before {content: ">"}

最后，我们使用css选择器“〜”表示“（及其子项之后的任何同级元素）”。这样，我们说的是“在检查了第N个输入之后，整个部分将滑动到相应的位置”。

input[id$="-1"]:checked ~ section{ transform: translateX(0)     }
input[id$="-2"]:checked ~ section{ transform: translateX(-100%) }
input[id$="-3"]:checked ~ section{ transform: translateX(-200%) }
input[id$="-4"]:checked ~ section{ transform: translateX(-300%) }

因为我们使用此选择器，所以重要的是我们的输入必须在滑动标签的外部和之前（此处为“部分”），以便它们是移动标签的同级兄弟（或其父级的兄弟姐妹）。

并且因为我们要观察截面的运动，所以我们添加了transition属性：

section{ transition: all 1s; }

并且，如果将整个HTML包装到另一个标签中（以防止选择器“〜”传播到其他部分），则可以为其他滑块使用相同的HTML结构，而无需编写任何其他CSS！

此处提供完整的教程以及精美的工作演示（适用于垂直版本，但请不用担心，它与水平版本非常相似）：http : //tympanus.net/codrops/2012/06/12/css-only-response平滑过渡的布局/

PS：在CSS中，请不要忘记为过渡和转换添加所有供应商前缀。始终检查w3schools.com（编辑：从不信任w3schools，但要在网上检查其他地方！）以了解需要哪些前缀。例：

-webkit-transition: all 1s;
transition: all 1s;