html - 显示 2 个轮播，显示时图像不会混淆-6ren

html - 显示 2 个轮播，显示时图像不会混淆

转载作者：太空狗更新时间：2023-10-29 16:09:35

我有这个仅由 Html 和 Css 制作的旋转木马，如果单独使用它可以正常工作，但如果我在同一页面上添加相同的旋转木马，当我滑动图像时确实会造成困惑，我不能找出问题所在。

我尝试为第二个轮播使用第二个文件夹，但仍然是同样的问题。谢谢你帮助我。

.carousel-inner {
    position: relative;
    overflow: hidden;
    width: 200px;
  height: 200px;
}

.carousel-open:checked + .carousel-item {
    position: static;
    opacity: 100;
}

.carousel-item {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
}

.carousel-item img {
    display: block;
    height: auto;
    max-width: 200px;
height:200px
}

.carousel-control {
    background: rgba(0, 0, 0, 0.28);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: none;
    font-size: 40px;
    height: 40px;
    line-height: 35px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    cursor: pointer;
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    width: 40px;
    z-index: 10;
    
}



.carousel-control.prev {
    left: 2%;
}

.carousel-control.next {
    right: 2%;
}

.carousel-control:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #aaaaaa;
}

#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
    display: block;
}

.carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

.carousel-indicators li {
    display: inline-block;
    margin: 0 5px;
}

.carousel-bullet {
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 35px;
}

.carousel-bullet:hover {
    color: #aaaaaa;
}

#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
    color: #428bca;
}

#title {
    width: 100%;
    position: absolute;
    padding: 0px;
    margin: 0px auto;
    text-align: center;
    font-size: 27px;
    color: rgba(255, 255, 255, 1);
    font-family: 'Open Sans', sans-serif;
    z-index: 9999;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}

<link rel="stylesheet" href="style_caroussel.css" >


    <div class="carousel-inner">
        <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
        <div class="carousel-item">
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </div>
        <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="https://img.lemde.fr/2019/04/22/0/191/1619/1079/688/0/60/0/e39da8d_2FIads9h8wB-0SwSgxVaVWsp.jpg">
        </div>
        <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg">
        </div>
        <label for="carousel-3" class="carousel-control prev control-1">‹</label>
        <label for="carousel-2" class="carousel-control next control-1">›</label>
        <label for="carousel-1" class="carousel-control prev control-2">‹</label>
        <label for="carousel-3" class="carousel-control next control-2">›</label>
        <label for="carousel-2" class="carousel-control prev control-3">‹</label>
        <label for="carousel-1" class="carousel-control next control-3">›</label>
        <ol class="carousel-indicators">
            <li>
                <label for="carousel-1" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-2" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-3" class="carousel-bullet">•</label>
            </li>
        </ol>
    </div>
</div>

<div class="carousel">
    <div class="carousel-inner">
        <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
        <div class="carousel-item">
            <img src="user__002/6.jpg">
        </div>
        <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="user__002/7.jpg">
        </div>
        <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="user__002/8.jpg">
        </div>
        <label for="carousel-3" class="carousel-control prev control-1">‹</label>
        <label for="carousel-2" class="carousel-control next control-1">›</label>
        <label for="carousel-1" class="carousel-control prev control-2">‹</label>
        <label for="carousel-3" class="carousel-control next control-2">›</label>
        <label for="carousel-2" class="carousel-control prev control-3">‹</label>
        <label for="carousel-1" class="carousel-control next control-3">›</label>
        <ol class="carousel-indicators">
            <li>
                <label for="carousel-1" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-2" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-3" class="carousel-bullet">•</label>
            </li>
        </ol>
    </div>
</div>

最佳答案

编辑:

自从你发表评论后，我改变了我的做法。
我保留了 Carousel-1-2-3 但在它们前面加了前缀。 aCarousel-1.. 等(不要触摸 control-1、-2、-3)
这反过来又允许我在 CSS 中选择所有带有以“Carousel-1”结尾的 id 等的输入:

input[id$="Carousel-1"]:checked~.control-1,
input[id$="Carousel-2"]:checked~.control-2,
input[id$="Carousel-3"]:checked~.control-3 {
   display: block;
   user-select: none;
}

input[id$="Carousel-1"]:checked~.control-1~.carousel-indicators li:nth-child(1) .carousel-bullet,
input[id$="Carousel-2"]:checked~.control-2~.carousel-indicators li:nth-child(2) .carousel-bullet,
input[id$="Carousel-3"]:checked~.control-3~.carousel-indicators li:nth-child(3) .carousel-bullet {
   color: #428bca;
}

这样您就不需要在 css 中为新轮播添加新的/重复的规则。这些将适用于每个轮播。

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
}

.carousel-open:checked+.carousel-item {
  position: static;
  opacity: 1;
}

.carousel-item {
  position: absolute;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease-out;
  transition: opacity 0.6s ease-out;
}

.carousel-item img {
  display: block;
  height: auto;
  max-width: 200px;
  height: 200px
}

.carousel-control {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 40px;
  height: 40px;
  line-height: 35px;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  cursor: pointer;
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-align: center;
  width: 40px;
  z-index: 10;
}

.carousel-control.prev {
  left: 2%;
}

.carousel-control.next {
  right: 2%;
}

.carousel-control:hover {
  background: rgba(0, 0, 0, 0.8);
  color: #aaaaaa;
}

input[id$="Carousel-1"]:checked~.control-1,
input[id$="Carousel-2"]:checked~.control-2,
input[id$="Carousel-3"]:checked~.control-3 {
  display: block;
  user-select: none;
}

.carousel-indicators {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

.carousel-indicators li {
  display: inline-block;
  margin: 0 5px;
}

.carousel-bullet {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 35px;
}

.carousel-bullet:hover {
  color: #aaaaaa;
}

input[id$="Carousel-1"]:checked~.control-1~.carousel-indicators li:nth-child(1) .carousel-bullet,
input[id$="Carousel-2"]:checked~.control-2~.carousel-indicators li:nth-child(2) .carousel-bullet,
input[id$="Carousel-3"]:checked~.control-3~.carousel-indicators li:nth-child(3) .carousel-bullet {
  color: #428bca;
}

#title {
  width: 100%;
  position: absolute;
  padding: 0px;
  margin: 0px auto;
  text-align: center;
  font-size: 27px;
  color: rgba(255, 255, 255, 1);
  font-family: 'Open Sans', sans-serif;
  z-index: 9999;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}

<div class="carousel-inner">
  <input class="carousel-open" type="radio" id="aCarousel-1" name="aCarousel" aria-hidden="true" hidden="" checked="checked">
  <div class="carousel-item">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </div>
  <input class="carousel-open" type="radio" id="aCarousel-2" name="aCarousel" aria-hidden="true" hidden="">
  <div class="carousel-item">
    <img src="https://img.lemde.fr/2019/04/22/0/191/1619/1079/688/0/60/0/e39da8d_2FIads9h8wB-0SwSgxVaVWsp.jpg">
  </div>
  <input class="carousel-open" type="radio" id="aCarousel-3" name="aCarousel" aria-hidden="true" hidden="">
  <div class="carousel-item">
    <img src="https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg">
  </div>
  <label for="aCarousel-3" class="carousel-control prev control-1">‹</label>
  <label for="aCarousel-2" class="carousel-control next control-1">›</label>
  <label for="aCarousel-1" class="carousel-control prev control-2">‹</label>
  <label for="aCarousel-3" class="carousel-control next control-2">›</label>
  <label for="aCarousel-2" class="carousel-control prev control-3">‹</label>
  <label for="aCarousel-1" class="carousel-control next control-3">›</label>
  <ol class="carousel-indicators">
    <li>
      <label for="aCarousel-1" class="carousel-bullet">•</label>
    </li>
    <li>
      <label for="aCarousel-2" class="carousel-bullet">•</label>
    </li>
    <li>
      <label for="aCarousel-3" class="carousel-bullet">•</label>
    </li>
  </ol>
</div>
</div>

<div class="carousel">
  <div class="carousel-inner">
    <input class="carousel-open" type="radio" id="bCarousel-1" name="bCarousel" aria-hidden="true" hidden="" checked="checked">
    <div class="carousel-item">
      <img src='https://picsum.photos/id/133/200/200'>
    </div>
    <input class="carousel-open" type="radio" id="bCarousel-2" name="bCarousel" aria-hidden="true" hidden="">
    <div class="carousel-item">
      <img src='https://picsum.photos/id/134/200/200'>
    </div>
    <input class="carousel-open" type="radio" id="bCarousel-3" name="bCarousel" aria-hidden="true" hidden="">
    <div class="carousel-item">
      <img src='https://picsum.photos/id/135/200/200'>
    </div>
    <label for="bCarousel-3" class="carousel-control prev control-1">‹</label>
    <label for="bCarousel-2" class="carousel-control next control-1">›</label>
    <label for="bCarousel-1" class="carousel-control prev control-2">‹</label>
    <label for="bCarousel-3" class="carousel-control next control-2">›</label>
    <label for="bCarousel-2" class="carousel-control prev control-3">‹</label>
    <label for="bCarousel-1" class="carousel-control next control-3">›</label>
    <ol class="carousel-indicators">
      <li>
        <label for="bCarousel-1" class="carousel-bullet">•</label>
      </li>
      <li>
        <label for="bCarousel-2" class="carousel-bullet">•</label>
      </li>
      <li>
        <label for="bCarousel-3" class="carousel-bullet">•</label>
      </li>
    </ol>
  </div>
</div>

原创:

我对第二个 slider 做了一些改动:
在 HTML 中

将每个 -1 替换为 -4，将 -2 替换为 -5，将 -3 替换为 -6(例如:将 control-1 替换为 control-4)
在 input 标签中替换:name="carousel"为 name="carousel2"(导致可见性问题)

在我添加的CSS中

#carousel-4:checked~.control-4,
#carousel-5:checked~.control-5,
#carousel-6:checked~.control-6 {
  display: block;
}

#carousel-4:checked~.control-4~.carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-5:checked~.control-5~.carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-6:checked~.control-6~.carousel-indicators li:nth-child(3) .carousel-bullet {
  color: #428bca;
}

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
}

.carousel-open:checked+.carousel-item {
  position: static;
  opacity: 1;
}

.carousel-item {
  position: absolute;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease-out;
  transition: opacity 0.6s ease-out;
}

.carousel-item img {
  display: block;
  height: auto;
  max-width: 200px;
  height: 200px
}

.carousel-control {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 40px;
  height: 40px;
  line-height: 35px;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  cursor: pointer;
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-align: center;
  width: 40px;
  z-index: 10;

}



.carousel-control.prev {
  left: 2%;
}

.carousel-control.next {
  right: 2%;
}

.carousel-control:hover {
  background: rgba(0, 0, 0, 0.8);
  color: #aaaaaa;
}

#carousel-1:checked~.control-1,
#carousel-2:checked~.control-2,
#carousel-3:checked~.control-3 {
  display: block;
}

/* added */

#carousel-4:checked~.control-4,
#carousel-5:checked~.control-5,
#carousel-6:checked~.control-6 {
  display: block;
}

.carousel-indicators {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

.carousel-indicators li {
  display: inline-block;
  margin: 0 5px;
}

.carousel-bullet {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 35px;
}

.carousel-bullet:hover {
  color: #aaaaaa;
}

#carousel-1:checked~.control-1~.carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked~.control-2~.carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked~.control-3~.carousel-indicators li:nth-child(3) .carousel-bullet {
  color: #428bca;
}

/* added */
#carousel-4:checked~.control-4~.carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-5:checked~.control-5~.carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-6:checked~.control-6~.carousel-indicators li:nth-child(3) .carousel-bullet {
  color: #428bca;
}

#title {
  width: 100%;
  position: absolute;
  padding: 0px;
  margin: 0px auto;
  text-align: center;
  font-size: 27px;
  color: rgba(255, 255, 255, 1);
  font-family: 'Open Sans', sans-serif;
  z-index: 9999;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}

 <div class="carousel-inner">
        <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden=""
            checked="checked">
        <div class="carousel-item">
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </div>
        <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="https://img.lemde.fr/2019/04/22/0/191/1619/1079/688/0/60/0/e39da8d_2FIads9h8wB-0SwSgxVaVWsp.jpg">
        </div>
        <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg">
        </div>
        <label for="carousel-3" class="carousel-control prev control-1">‹</label>
        <label for="carousel-2" class="carousel-control next control-1">›</label>
        <label for="carousel-1" class="carousel-control prev control-2">‹</label>
        <label for="carousel-3" class="carousel-control next control-2">›</label>
        <label for="carousel-2" class="carousel-control prev control-3">‹</label>
        <label for="carousel-1" class="carousel-control next control-3">›</label>
        <ol class="carousel-indicators">
            <li>
                <label for="carousel-1" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-2" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-3" class="carousel-bullet">•</label>
            </li>
        </ol>
    </div>
    </div>

    <div class="carousel">
        <div class="carousel-inner">
            <input class="carousel-open" type="radio" id="carousel-4" name="carousel2" aria-hidden="true" hidden=""
                checked="checked">
            <div class="carousel-item">
                <img src='https://picsum.photos/id/133/200/200'>
            </div>
            <input class="carousel-open" type="radio" id="carousel-5" name="carousel2" aria-hidden="true" hidden="">
            <div class="carousel-item">
                <img src='https://picsum.photos/id/134/200/200'>
            </div>
            <input class="carousel-open" type="radio" id="carousel-6" name="carousel2" aria-hidden="true" hidden="">
            <div class="carousel-item">
                <img src='https://picsum.photos/id/135/200/200'>
            </div>
            <label for="carousel-6" class="carousel-control prev control-4">‹</label>
            <label for="carousel-5" class="carousel-control next control-4">›</label>
            <label for="carousel-4" class="carousel-control prev control-5">‹</label>
            <label for="carousel-6" class="carousel-control next control-5">›</label>
            <label for="carousel-5" class="carousel-control prev control-6">‹</label>
            <label for="carousel-4" class="carousel-control next control-6">›</label>
            <ol class="carousel-indicators">
                <li>
                    <label for="carousel-4" class="carousel-bullet">•</label>
                </li>
                <li>
                    <label for="carousel-5" class="carousel-bullet">•</label>
                </li>
                <li>
                    <label for="carousel-6" class="carousel-bullet">•</label>
                </li>
            </ol>
        </div>
    </div>

关于html - 显示 2 个轮播，显示时图像不会混淆，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57437054/

文章推荐： android - 为什么我在 Logcat 中看不到我的打印语句？

文章推荐： c - c语言逻辑运算符的误解

文章推荐：安卓回音消除

文章推荐： c - 内部工作大于/小于

java - 与 JAX-RS 混淆，Jersey 与 JAX-RS 混淆
我真的很困惑。我已经尝试使用带有 tomcat 的 Jax-rs 并使用所有注释，我能够使用 url 调用我的服务。因此，如果没有 Jax-rs，我可以简单地拥有一个 servlet 并调用我的服务。
BAML 混淆
是否有任何工具/商业混淆器可以混淆 WPF 控件中的 BAML 资源？如果没有，就 IP 保护而言，这是一段艰难的时期，因为黑客可以通过使用 BAML 到 XAML 转换器轻松查看 BAML 资源。
COBOL 混淆
嘿大家。我在尝试使用 COBOL 在 zOS 环境中解决的编码项目中遇到了一些麻烦。我需要读入一个文件并将它们放入索引表中(我知道将少于 90 条记录)。让我感到困扰的是，我们受到项目参数的约束，以
Java线程join()混淆
我试图按照这个例子来理解 join() 方法: class PrintDemo { public void printCount() { try { for(int
Java编译器自动重命名参数(混淆)
当我编译我正在编写的代码，然后在 JD Gui 中查看时，方法显示带有如下标题: public void growSurface(Random paramRandom, int paramInt1,
Android库项目——混淆
我正在为重新分发准备 Android 库，它的代码必须进行混淆处理。我已经阅读了有关此主题的一些内容，并且决定使用 Android Library Project。它将作为 jar 分发(自动在/bi
F# MSIL 混淆
两个混淆相关的问题: 1) 是否有任何工具可以将 F# 从 MSIL 目标形式反汇编回其源形式或接近它的形式？这不是通过默默无闻来实现安全性的尝试，但我想保护某些源代码免遭“盗窃”。 2) 我简要地查
r - MCMClogit 混淆
谁能向我解释为什么 simulatedCase <- rbinom(100,1,0.5) simDf <- data.frame(CASE = simulatedCase) posterior_m0
.NET AppDomain 混淆
我一直无法找到关于使用 AppDomains 时发生的事情的非常清楚的描述，所以希望有人能够启发我。我有一个简单的测试程序(基本上是扯掉了 MSDN example ): using System;
git rebase 混淆
假设我有 2 个分支topic和 master如果我在 topic分支，然后运行 git rebase master它是 rebase master 还是 rebase 主题分支？做 git r
c# - 线程同步被锁(this)混淆
我有一个类(class): public class LockTest { public void LockThis() { lock (this)
javascript - AngularJS 混淆
我正在尝试最小化/混淆我的 Angular 代码，但遇到了问题。我在这里阅读“缩小说明”http://docs.angularjs.org/tutorial/step_05但我定义我的 Control
Javascript float 混淆
我遇到了一些困惑的操作。 var a = 0.1; var b = 0.2; var c = 0.3; console.log(a); // 0.1 console.log(b); // 0.2 co
JavaScript 下拉列表不会在点击时关闭，混淆？
感谢您查看我的帖子 - 我正在尝试弄清楚如何在单击链接时关闭此下拉菜单，但我的 JavaScript 技能非常缺乏，而且代码似乎很困惑。这是 HTML:
encryption - 混淆、散列和加密之间有什么区别？
混淆、哈希和加密之间有什么区别？这是我的理解: 哈希是一种单向算法；无法逆转混淆与加密类似，但不需要任何“ secret ”即可理解(ROT13 就是一个例子) 加密是可逆的，但需要“ secre
变量之间的 Perl 混淆
我有以下代码 my $content = $response->content; $content =~ /username=([\s\S]+?)&/; my $username = $1; prin
dynamic - 匿名类型列表和动态...混淆
我在 .NET 中发现了一些与我预期的有点不同的东西。我粘贴的代码没有意义，但它是我拥有的一个复杂得多的函数的浓缩版。我实际上是在获取匿名类型信息作为参数(尚未创建匿名类型的实例)，我需要创建该类型的
JavaFX Proguard 混淆
我正在努力解决 JavaFX 应用程序的混淆问题。使用此项目作为基础: https://github.com/openjfx/samples/tree/master/IDE/IntelliJ/Non-
java - 混淆 CSV
是否可以制作一个与此类似的 CSV 阅读器 while((line = reader.readLine()) != null){ String[] values = line.
java - 字符串输出与 + 混淆
公共(public)类测试2 { 公共(public)静态无效主(字符串[]参数){ System.out.println("3 + 6"); System.out.println(3

太空狗

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 显示 2 个轮播，显示时图像不会混淆