html - 同一页面中的两个纯 CSS 幻灯片-6ren

html - 同一页面中的两个纯 CSS 幻灯片

转载作者：行者123 更新时间：2023-11-28 07:19:58

所以我在 Internet 上找到了这个幻灯片，让它工作和调整它有点容易。当我试图在页面上放置两个相同的幻灯片时，问题就开始了，它“实际上”有效，但是当幻灯片(1)打开并显示图像时，第二个是“不可见的”(实际上不在那里) all) 导航点的一部分。如果我单击任何导航点，则会出现 slider ，但 slider (2) 会消失，依此类推。

所以我尝试更改幻灯片中的每个类名和每个 ID，制作两个不同的 CSS block ，但没有成功。

这是 Slider(1) 的 CSS

/* ------------------------------------------ ---------- 幻灯片 1 -------------------------------------- --- */

.slides1 {
    padding: 0;
    width: 100%;
    min-width: 600px;
    height: 100%;
    display: block;
    margin: 0 auto;
    position: relative;
}

.slides1 input { display: none; }

.slide-container1 { display: block; }

.slide1 {
    top: 0;
    opacity: 0;
    width: 100%;
    height: 470px;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out;
}

.slide1 img {
    width: 100%;
    min-width: 100%;
    height: 100%;

    margin: 0 auto;
}

.nav1 label {
    width: 15%;
    height: 100%;
    display: none;
    position: absolute;

    opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 30pt;
    text-align: center;
    line-height: 450px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide1:hover + .nav1 label { opacity: 0.5; }

.nav1 label:hover { opacity: 1; }

.nav1 .next1 { right: 0; }

.textlabel1 {
    width: 100%;
    height: 50px;
    position: absolute;
    display: block;
    z-index: 90;
    top: 350px;
    text-shadow: 0px 0px 15px rgb(119, 119, 119);

    padding: 0;
    margin: 0 auto;
}

.textlabel1 h2 {
    font-size: 24px;
    text-align: center;

    padding: 0;
    margin: 0 15px 0 15px;
}

input:checked + .slide-container1  .slide1 {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container1 .nav1 label { display: block; }

.nav-dots1 {
    width: 100%;
    bottom: 9px;
    height: 11px;
    display: block;
    position: absolute;
    text-align: center;
}

.nav-dots1 .nav-dot1 {
    top: -5px;
    width: 11px;
    height: 11px;
    margin: 0 4px;
    position: relative;
    border-radius: 100%;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots1 .nav-dot1:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots1 label#img-dot-1, input#img-2:checked ~ .nav-dots1 label#img-dot-2, input#img-3:checked ~ .nav-dots1 label#img-dot-3, input#img-4:checked ~ .nav-dots1 label#img-dot-4, input#img-5:checked ~ .nav-dots1 label#img-dot-5, input#img-6:checked ~ .nav-dots1 label#img-dot-6, input#img-7:checked ~ .nav-dots1 label#img-dot-7 {
    background: rgba(0, 0, 0, 0.8);
}

这是 Slider(2) 的 CSS

/* ------------------------------------------ ---------- 幻灯片 2 ---------------------------------- */

.slides2 {
    padding: 0;
    width: 100%;
    min-width: 600px;
    height: 100%;
    display: block;
    margin: 0 auto;
    position: relative;
}

.slides2 input { display: none; }

.slide-container2 { display: block; }

.slide2 {
    top: 0;
    opacity: 0;
    width: 100%;
    height: 470px;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out;
}

.slide2 img {
    width: 100%;
    min-width: 100%;
    height: 100%;

    margin: 0 auto;
}

.nav2 label {
    width: 15%;
    height: 100%;
    display: none;
    position: absolute;

    opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 30pt;
    text-align: center;
    line-height: 450px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide2:hover + .nav2 label { opacity: 0.5; }

.nav2 label:hover { opacity: 1; }

.nav2 .next2 { right: 0; }

.textlabel2 {
    width: 100%;
    height: 50px;
    position: absolute;
    display: block;
    z-index: 90;
    top: 350px;
    text-shadow: 0px 0px 15px rgb(119, 119, 119);

    padding: 0;
    margin: 0 auto;
}

.textlabel2 h2 {
    font-size: 24px;
    text-align: center;

    padding: 0;
    margin: 0 15px 0 15px;
}

input:checked + .slide-container2  .slide2 {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container2 .nav2 label { display: block; }

.nav-dots2 {
    width: 100%;
    bottom: 9px;
    height: 11px;
    display: block;
    position: absolute;
    text-align: center;
}

.nav-dots2 .nav-dot2 {
    top: -5px;
    width: 11px;
    height: 11px;
    margin: 0 4px;
    position: relative;
    border-radius: 100%;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots2 .nav-dot2:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
}

input#imga-1:checked ~ .nav-dots2 label#imga-dot-1, input#imga-2:checked ~ .nav-dots2 label#imga-dot-2, input#imga-3:checked ~ .nav-dots2 label#imga-dot-3, input#imga-4:checked ~ .nav-dots2 label#imga-dot-4, input#imga-5:checked ~ .nav-dots2 label#imga-dot-5 {
    background: rgba(0, 0, 0, 0.8);
}

这是我的页面，两者最外部的容器是“room”类

<div class="room"> 
                        <div style="height: 70px; width: 100%; line-height: 70px; border-bottom: 1px solid black; background-color: #242424; "> 
                            <h2 class="subtitle" style="color: #FFFFFF; text-align: left; padding: 0 0 0 40px;" > Camera Matrimoniale </h2>
                        </div>
                        <div style="height: 530px; width: 100%;">
                            <div style="height: 530px; width: 450px; float: left; padding: 25px 15px 25px 15px">

                            </div>
                            <div style="height: 530px; width: 690px; float: right; ">
                            <!------------------------------------------------------------------------------------------- SLIDESHOW ------------------------------------------------------>
                                <div style="height: 510px; width: 600px; padding: 10px 0; position: relative; left: 80px;">
                                    <ul class="slides1">
                                        <input type="radio" name="radio-btn" id="img-1" checked />
                                        <li class="slide-container1">
                                            <div class="slide1">
                                                <img src="../images/cameradouble/BedBreakfast_Letto_Matrimoniale_Camera_Matrimoniale.jpg" alt="Camera Matrimoniale - Letto Matrimoniale" title="Camera Matrimoniale - Letto Matrimoniale" /> 
                                                <div class="textlabel1">
                                                    <h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Matrimoniale - Letto Matrimoniale </h2> 
                                                </div>
                                            </div>
                                            <div class="nav1">
                                                <label for="img-4" class="prev1">&#x2039;</label>
                                                <label for="img-2" class="next1">&#x203a;</label>
                                            </div>
                                        </li>
                                        <input type="radio" name="radio-btn" id="img-2" />
                                        <li class="slide-container1">
                                            <div class="slide1">
                                                <img src="../images/cameradouble/BedBreakfast_Letto_Singolo_Camera_Matrimoniale.jpg" alt="Camera Matrimoniale - Letto Singolo" title="Camera Matrimoniale - Letto Singolo"/> 
                                                <div class="textlabel1">
                                                    <h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Matrimoniale - Letto Singolo </h2> 
                                                </div>
                                            </div>
                                            <div class="nav1">
                                                <label for="img-1" class="prev1">&#x2039;</label>
                                                <label for="img-3" class="next1">&#x203a;</label>
                                            </div>
                                        </li>
                                        <input type="radio" name="radio-btn" id="img-3" />
                                        <li class="slide-container1">
                                            <div class="slide1">
                                                <img src="../images/cameradouble/BedBreakfast_Bagno_Indipendente_Camera_Matrimoniale.jpg" alt="Camera Matrimoniale - Bagno Indipendente" title="Camera Matrimoniale - Bagno Indipendente"/>
                                                <div class="textlabel1">
                                                    <h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Matrimoniale - Bagno Indipendente </h2> 
                                                </div>
                                            </div>
                                            <div class="nav1">
                                                <label for="img-2" class="prev1">&#x2039;</label>
                                                <label for="img-4" class="next1">&#x203a;</label>
                                            </div>
                                        </li>
                                        <input type="radio" name="radio-btn" id="img-4" />
                                        <li class="slide-container1">
                                            <div class="slide1">
                                                <img src="../images/cameradouble/BedBreakfast_Bagno_Indipendente_Doccia_Camera_Matrimoniale.jpg" alt="Camera Matrimoniale - Doccia Bagno Indipendente" title="Camera Matrimoniale - Doccia Bagno Indipendente"/>
                                                <div class="textlabel1">
                                                    <h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Matrimoniale - Doccia Bagno Indipendente </h2> 
                                                </div>
                                            </div>
                                            <div class="nav1">
                                                <label for="img-3" class="prev1">&#x2039;</label>
                                                <label for="img-1" class="next1">&#x203a;</label>
                                            </div>
                                        </li>
                                        <li class="nav-dots1">
                                          <label for="img-1" class="nav-dot1" id="img-dot-1"></label>
                                          <label for="img-2" class="nav-dot1" id="img-dot-2"></label>
                                          <label for="img-3" class="nav-dot1" id="img-dot-3"></label>
                                          <label for="img-4" class="nav-dot1" id="img-dot-4"></label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="clear: both; height: 20px; width: 100%; min-width: 1200px;"> </div>
                    <div class="room">
                        <div style="height: 70px; width: 100%; line-height: 70px; border-bottom: 1px solid black; background-color: #242424; "> 
                            <h2 class="subtitle" style="color: #FFFFFF; text-align: left; padding: 0 0 0 40px;" > Camera Doppia <i> (Anche Uso Singolo) </i> </h2>
                        </div>
                        <div style="height: 530px; width: 100%;">
                            <div style="height: 530px; width: 450px; float: left; padding: 25px 15px 25px 15px">

                            </div>
                            <div style="height: 530px; width: 690px; float: right; ">
                            <!------------------------------------------------------------------------------------------- SLIDESHOW ------------------------------------------------------>
                                <div style="height: 510px; width: 600px; padding: 10px 0; position: relative; left: 40px;">
                                    <ul class="slides2">
                                        <input type="radio" name="radio-btn" id="imga-1" checked />
                                        <li class="slide-container2">
                                            <div class="slide2">
                                                <img src="../images/camerasingle/BedBreakfast_Letto1_Camera_Doppia.jpg" alt="Camera Doppia - Letto Singolo (1)" title="Camera Doppia - Letto Singolo (1)" /> 
                                                <div class="textlabel2">
                                                    <h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Doppia - Letto Singolo (1) </h2> 
                                                </div>
                                            </div>
                                            <div class="nav2">
                                                <label for="imga-3" class="prev2">&#x2039;</label>
                                                <label for="imga-2" class="next2">&#x203a;</label>
                                            </div>
                                        </li>
                                        <input type="radio" name="radio-btn" id="imga-2" />
                                        <li class="slide-container2">
                                            <div class="slide2">
                                                <img src="../images/camerasingle/BedBreakfast_Letto2_Camera_Doppia.jpg" alt="Camera Doppia - Letto Singolo (2)" title="Camera Doppia - Letto Singolo (2)"/> 
                                                <div class="textlabel2">
                                                    <h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Doppia - Letto Singolo (2) </h2> 
                                                </div>
                                            </div>
                                            <div class="nav2">
                                                <label for="imga-1" class="prev2">&#x2039;</label>
                                                <label for="imga-3" class="next2">&#x203a;</label>
                                            </div>
                                        </li>
                                        <input type="radio" name="radio-btn" id="imga-3" />
                                        <li class="slide-container2">
                                            <div class="slide2">
                                                <img src="../images/camerasingle/BedBreakfast_Bagno_Indipendente_Camera_Doppia.jpg" alt="Camera Doppia - Bagno Indipendente" title="Camera Doppia - Bagno Indipendente"/>
                                                <div class="textlabel2">
                                                    <h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Doppia - Bagno Indipendente </h2> 
                                                </div>
                                            </div>
                                            <div class="nav2">
                                                <label for="imga-2" class="prev2">&#x2039;</label>
                                                <label for="imga-1" class="next2">&#x203a;</label>
                                            </div>
                                        </li>
                                        <li class="nav-dots2">
                                          <label for="imga-1" class="nav-dot2" id="imga-dot-1"></label>
                                          <label for="imga-2" class="nav-dot2" id="imga-dot-2"></label>
                                          <label for="imga-3" class="nav-dot2" id="imga-dot-3"></label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

最佳答案

那是因为您使用的是 input type radio，它只允许您从它的组中选择一个选定的元素。

出现问题的原因是您将 slide1 和 slide2 分组为同一个名称，即 name="radio-btn"

您需要做的只是更改第 2 个幻灯片的组名，使其在 slide1 和 slide2 之间有所不同，更改为 name="radio- btn" 和 name="radio-btn-2" 就像这个 DEMO

关于html - 同一页面中的两个纯 CSS 幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32130889/

文章推荐： html - Textarea后输入在不同浏览器显示奇数

文章推荐： html - 控制旋转加载图标的大小

文章推荐： css - 使用 Bootstrap 将导航栏内容居中

文章推荐： html - 使用 Aptana Studio 3 将 CSS 链接到 HTML

javascript - 在父选项卡(页面)上显示叠加层，直到打开其所有子选项卡(页面)
假设我有父页面。当我单击“打印”时，会打开一个新选项卡(页面)以进行打印预览。我想要的是，当我单击“打印”时，父选项卡(页面)上应显示覆盖层，以停止进一步的工作，直到子选项卡关闭。 Because
javascript - 如何从 HTTPS 页面 POST 数据到 HTTP 页面
我知道这是不可能的，但我想我还是会问这个问题。我有一个 HTTPS 页面，并且正在动态创建一个表单。我想将表单发布到 HTTP 页面。在浏览器不弹出警告的情况下这可能吗？当我在 IE8 上执行此操作
javascript - 将 .aspx 页面 html 渲染/调用到另一个 .aspx 页面
在我的应用程序中，我实现了ajax 4.0客户端模板目前我的模板位于同一个.aspx页面上。 (例如 Main.aspx) 但我想将它们外部化。(即所有 HTML 都会放在另一个页面上) 为此，我使
javascript - 锁定/卡住导航栏/整个 html 页面，直到加载其他 html 页面
我目前正在构建自己的网络应用程序。在此应用程序的标题中有一个导航栏。我将相同的导航栏添加到我的所有 html 页面，以便在页面之间导航时保持可见，并将导航元素设置为事件到我现在所在的页面。我的
iis-7 - Windows 身份验证不适用于经典 ASP 页面(但适用于同一站点中的 ASP.Net 页面)
我们有一个在集成管道下运行的 IIS7 Intranet 站点，该管道主要是 ASP.Net，带有一些传统的经典 ASP 页面。该站点允许匿名访问大多数区域，但使用 Windows 身份验证来保护某些
c# - 如何将长 HTML 文件拆分为单独的相互链接的页面，例如页面 1、页面 2、页面 3
有一个要求，我需要根据 div 标签的高度超过 700 像素的条件将大型 HTML 页面拆分为多个页面。我还可以根据字数拆分页面。下面的示例根据 HTML 标签分割页面，而我需要根据 div 高度
html - 如何在不使用 jquery 的情况下在另一个 html 页面 div 中显示 html 页面
有两个 html 页面，如果在第一个页面中单击特定图像，它将转到第二个 html 页面。如果在第二个 html 页面上的任何地方单击它应该返回到第一页并将第二页完全显示在第一页的一个 div 中 1s
haskell - Servant 中的 Html 页面——如何结合 REST API 和静态 html 页面？
我有一个简单的 hello world Servant 应用程序。我需要向它添加一些静态或动态的 html 页面。我怎样才能做到这一点？在文档中没有提到它。注意我不想在 Haskell 代码中创建 h
javascript - jQuery 将外部 html 页面 <title> 插入另一个 html 页面
我有两个文件 index.html 和 index2.html。这两个文件都在本地机器上的同一目录中(无法访问 PHP 等)。我正在努力 Page Title 使用 jQuery 从 index.h
java - 为一个 Servlet 创建一个动态前端 JSP 页面，同时将 Servlet 的输出显示到 JSP 页面
假设我有一个 JSP 页面 index.jsp User id:
javascript - 页面 A 将值发布到页面 B，页面 B 使用 cURL 向页面 C 发送另一个帖子，并将响应返回到页面 A
我面临着一个对我来说非常陌生的情况。我会尽力让事情变得简单来解释它一步一步来。 1)在页面 A(用户表单)中，我从字段中获取一些值并将其作为 jQuery AJAX POST 发送到页面 B。这是主要
javascript - JQuery 函数点击 html 页面 1 上的按钮，影响 html 页面 2 的列
我正在尝试弄清楚如何从 buttons.html 获取用户按钮点击动态切换第二个列的可见性 userinput.html 。我正在使用 DataTables userinput.html表并认为我有
asp.net-mvc - angularjs 仅带有 cshtml 页面，而不是带有 web api 2 的 html 页面
我有asp。净 mvc4 项目。 Angularjs 已集成。我已经按照以前的要求构建了 HTML 页面和 WEB API 2。现在出于某种原因，我必须使用 CSHTML 页面。以前我只有 web
WordPress 页面 - 未找到页面
我的网站包含大约 18 个不同的页面。以管理员身份登录后，我单击“页面”。我看到了以下内容 All (20) | Mine (19) | Published (19) | Draft (1) No
Haskell "man"页面？
Haskell 中每个函数都有手册页吗？换句话说，我可以在某处输入 man fst 并获取有关该函数的手册或帮助页面吗？我发现大量的功能势不可挡! 我正在使用 GHC 和 GHCi。最佳答案我不知
Github 页面 - 禁用除单个站点之外的所有站点的自定义域重定向？
我一直在用github pages很长一段时间以来，并使用自定义域重定向功能来重定向我的 user website来自 prahladyeri.github.io到我自己的域名 https://www
显示旧代码的 Github 页面
我对 Github 有一个基本的了解:我知道如何创建、添加、提交、推送和克隆存储库。我也开始探索 Github 页面来托管我的项目。我的最新项目于 3 月开始并将其推送到 gh-page。从那以后，我
Airflow Ooops 页面
在尝试查看日志时，Airflow 会抛出一个带有以下消息的 oops 页面: File "/Users/user/.pyenv/versions/3.5.2/lib/python3.5/locale.
GitHub 页面 - 网址重写支持
我已经按照此处列出的步骤 (https://pages.github.com/) 为我正在处理的网站设置了一个 GitHub 页面我设置的站点当前托管在 IIS 下，并使用 URL Rewrite
将域重定向到 Openshift 页面
我想将我的 domain.com 重定向到 openshift 页面 (openshift-app.rhcloud.com)。我已经按照描述完成了 here它有效。唯一的问题是，在任何网站上，我都不会

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 同一页面中的两个纯 CSS 幻灯片