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

c# - [纯] 函数可以抛出异常吗？
可以抛出异常的函数可以有[pure]属性吗？最佳答案根据 https://msdn.microsoft.com/en-us/library/system.diagnostics.contracts
纯 CSS 推送导航不会隐藏
我使用的是纯 css 推送导航。它工作得很好，但是我不知道如何在单击导航链接时隐藏菜单。您必须手动单击菜单图标才能使菜单返回隐藏状态。但是，当单击链接并且站点跳转到某个部分时，我希望菜单自动滑入隐藏状
纯 CSS 下拉菜单项显示
我正在尝试让纯 CSS 下拉菜单正常工作。它在很大程度上确实有效，除了其他内容似乎显示出来但我不知道为什么。 http://jsfiddle.net/uQveP/4/ 有人可以告诉我我做错了什么吗？
纯 C 中的回调函数
这个问题在这里已经有了答案: What is a "callback" in C and how are they implemented? (9 个回答) 关闭 8 年前。我正在以这种方式实现回
html - 纯 HTML 后退按钮
我想在不使用 Javascript 或任何其他语言的情况下，使用 HTML 和 CSS 创建一个 Page Back Button。我想用纯 HTML 和 CSS 来完成。我进行了搜索，但每次代码中
prolog - 纯 Prolog 中的目标顺序
我对序言很陌生。据我所知，Pure Prolog 仅限于 Horn 子句。这是一个非常简单的序言程序 - % student( Snr , FirstName , LastName ,
html - 纯 CSS 加载指示器适合容器大小
我想在加载数据时对容器使用以下加载指示器。问题是， slider 具有固定的宽度和高度(300 像素和 300 像素)，但我希望它能够动态适应容器。当我尝试添加宽度时:140px；和高度:140px
html - 纯 css 滚动阴影
当内容超过可用宽度时，我需要启用滚动阴影。这是我试图用纯 css(没有 JS)来实现的。我遇到了很多文章，可以使用 css 多背景和背景附件来实现。如果内容是文本类型，则可以使用下面的 jsfilld
regex - 纯 Lua 中功能齐全的正则表达式库
我正在编写一个上古卷轴在线插件，它由一个名为 Havok Script 的轻微修改的 Lua 5.1 引擎支持。 .这个Lua环境不允许访问os , io , package , debug模块或任何
纯 C 语言的 Arduino
我自己尝试过将 Arduino 库编译成他们自己的独立库并链接到 Eclipse 中的一个项目，但在此过程中遇到了一些问题。是否有关于如何启动和运行的体面指南？我一直很难在网上找到一个真正有效的..
javascript - 从本地存储中仅删除选定的列表项 - 纯 JS
我在这里遇到了一些麻烦。我正在尝试使用本地存储创建一个待办事项列表，但我唯一要做的就是将列表项添加到本地存储并删除所有项目从本地存储中删除，但我无法从列表中删除单个 SELECTED 项目。有人可
html - 纯 CSS 响应式文字效果
我的问题很简单。考虑以下 CodePen .是否有可能仅使用 css 就可以获得相同的结果？换句话说，如果不使用 javascrip 如何做到这一点？非常感谢! Nachos are
angularjs - 纯 angularjs 滚动事件监听器
我正在使用没有 jquery 的 angularjs，并尝试创建滚动事件监听器。尝试过这种方法: $rootScope.$watch(function() { return $windo
javascript - 纯 WebGL 虚线
我正在尝试使用纯 webgl 创建虚线。我知道这已经有一个问题，也许我很笨，但我不知道如何让它发挥作用。我理解这个概念，但我不知道如何在着色器中获取沿路径的距离。以前的答案有以下行: varying
javascript - 纯 JavaScript 工具提示
我正在尝试用纯 JavaScript 制作工具提示，显示在 hover .就像 Stack Overflow 中将鼠标悬停在配置文件名称上的一个 div显示。我尝试使用 onmouseover ,
javascript - 纯 JavaScript 添加监听器到加载的新元素
我想要通过 AJAX 将监听器添加到新元素的想法: 例如，现在我有 hello world 我为每个添加了一个监听器，但是当我通过 AJAX 加载新元素时，它没有监听器；我不完全确定问题是什么。
javascript - 各种日期的动态倒计时时钟 - 纯 Javascript
如果我错误地提出了这个问题，或者之前已经有人问过并回答过这个问题，我提前表示歉意。我的搜索发现了类似的基于 JQuery 和/或静态日期的问答，我正在寻找具有动态日期的纯 JavaScript 解决方
multithreading - 纯 Haskell 代码是否需要线程池？
在 Real World Haskell, Chapter 28, Software transactional memory ，开发了一个并发的网络链接检查器。它获取网页中的所有链接，并使用 HEA
javascript - 纯 JavaScript 将图像拖到浏览器
我正在尝试取消 jQuery-fy 一个聪明的 piece of code ，但有点太聪明了。目标是simple 。将图像从桌面拖动到浏览器。在这次 unjQueryfication 过程中，我发
javascript - 纯 Javascript end()
如何重新创建 jQuery end() $('#id') .find('.class') .css('font',f) .end() .find('.seven') .css(b,'red') 我有什

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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