html - 从 html 中删除 id 以重用代码

标签 html css class carousel

我正尝试在我网站的多个位置重复使用此图片 slider ，但由于 ID，我无法这样做。

我从一个旧的代码笔那里得到了这段代码，但它比我以前使用的要复杂一点，所以我想知道是否有人可以帮助我。

这是 html :

@import url(https://fonts.googleapis.com/css?family=Varela+Round);
.slides * {
	user-select: none;
	-webkit-user-select: none;
-webkit-  touch-callout: none;
}
.slides {
	padding: 0;
	margin: 0 auto;
	width: 200px;
	height: 300px;
	display: block;
	position: relative;
}
.slides input {
	display: none;
}
.slide-container {
	display: block;
}
.slide {
	top: 0;
	opacity: 0;
	width: 200px;
	height: 300px;
	display: block;
	position: absolute;
	transform: scale(0);
	transition: all .7s slide;
}
.slide img {
	width: 100%;
	height: 100%;
}
.nav label {
	width: 50px;
	height: 100%;
	display: none;
	position: absolute;
	opacity: 0;
	z-index: 9;
	cursor: pointer;
	transition: opacity .2s;
	color: #FFF;
	font-size: 75pt;
	text-align: center;
	line-height: 380px;
	font-family: "Varela Round", sans-serif;
	background-color: rgba(255, 255, 255, .3);
	text-shadow: 0px 0px 15px  rgb(119, 119, 119);
}
.slide:hover + .nav label {
	opacity: 0.5;
}
.nav label:hover {
	opacity: 1;
}
.nav .next {
	right: 0;
}
input:checked + .slide-container .slide {
	opacity: 1;
	transform: scale(1);
	transition: opacity 1s ease-in-out;
}
input:checked + .slide-container .nav label {
	display: block;
}
.nav-dots {
	width: 100%;
	bottom: -20px;
	left: 26%;
	height: 11px;
	display: block;
	position: absolute;
}
.nav-dots .nav-dot {
	top: -5px;
	width: 5px;
	height: 5px;
	margin: 0  4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(180, 180, 180, 0.6);
}
.nav-dots .nav-dot:hover {
	cursor: pointer;
	background-color: rgba(44, 44, 44, 0.8);
}
input#img-1:checked ~ .nav-dots label#img-dot-1, input#img-2:checked ~  .nav-dots label#img-dot-2,  input#img-3:checked ~ .nav-dots label#img-dot-3, input#img-4:checked ~  .nav-dots label#img-dot-4,  input#img-5:checked ~ .nav-dots label#img-dot-5, input#img-6:checked ~  .nav-dots label#img-dot-6 {
	background: rgba(0, 0, 0, 0.8);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

    <h3>Mate</h3>
    <ul class="slides">
    <input type="radio" name="radio-btn" id="img-1" checked />
    <li class="slide-container">
        <div class="slide">
            <img src="img/1.jpg"/>
        </div>
        <div class="nav">
            <label for="img-3" class="prev">&#x2039;</label>
            <label for="img-2" class="next">&#x203a;</label>
        </div>
     </li>
    <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
        <div class="slide">
            <img src="img/2.jpg" />
        </div>
        <div class="nav">
            <label for="img-1" class="prev">&#x2039;</label>
            <label for="img-3" class="next">&#x203a;</label>
        </div>
    </li>
    <input type="radio" name="radio-btn" id="img-3" />
    <li class="slide-container">
        <div class="slide">
            <img src="img/3.jpg" />
        </div>
        <div class="nav">
            <label for="img-2" class="prev">&#x2039;</label>
            <label for="img-1" class="next">&#x203a;</label>
        </div>
    </li>
    <li class="nav-dots">
        <label for="img-1" class="nav-dot" id="img-dot-1"></label>
        <label for="img-2" class="nav-dot" id="img-dot-2"></label>
        <label for="img-2" class="nav-dot" id="img-dot-3"></label>
    </li>
    </ul>

</body>
</html>

大部分 css 是我知道的样式，但我觉得有必要包含上下文。

最佳答案

按原样使用代码，使用输入和标签。

您无法让它工作的原因可能是您的 ID 不匹配。如果更改输入的 id，则必须相应地更新标签(在每种情况下)。

此 codepen 中的每个图像都有一个与之关联的输入 ID，因此重要的是，如果您更改 ID，则同时更新标签；那么代码应该可以工作

@import url(https://fonts.googleapis.com/css?family=Varela+Round);
h3 {
  text-align: center;
  font-size: 2em;
  font-weight: bold;
}

html,
body {
  background: #fff;
}

.slides * {
  user-select: none;
  -webkit-user-select: none;
  -webkit- touch-callout: none;
}

.slides {
  padding: 0;
  margin: 0 auto;
  width: 200px;
  height: 300px;
  display: block;
  position: relative;
}

.slides input {
  display: none;
}

.slide-container {
  display: block;
}

.slide {
  top: 0;
  opacity: 0;
  width: 200px;
  height: 300px;
  display: block;
  position: absolute;
  transform: scale(0);
  transition: all .7s slide;
}

.slide img {
  width: 100%;
  height: 100%;
}

.nav label {
  width: 50px;
  height: 100%;
  display: none;
  position: absolute;
  opacity: 0;
  z-index: 9;
  cursor: pointer;
  transition: opacity .2s;
  color: #FFF;
  font-size: 75pt;
  text-align: center;
  line-height: 380px;
  font-family: "Varela Round", sans-serif;
  background-color: rgba(255, 255, 255, .3);
  text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover+.nav label {
  opacity: 0.5;
}

.nav label:hover {
  opacity: 1;
}

.nav .next {
  right: 0;
}

input:checked+.slide-container .slide {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s ease-in-out;
}

input:checked+.slide-container .nav label {
  display: block;
}

.nav-dots {
  width: 100%;
  bottom: -20px;
  left: 26%;
  height: 11px;
  display: block;
  position: absolute;
}

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

.nav-dots .nav-dot:hover {
  cursor: pointer;
  background-color: rgba(44, 44, 44, 0.8);
}

.nav label:hover {
  opacity: 1;
}

.nav .next {
  right: 0;
}

input:checked+.slide-container .slide {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s ease-in-out;
}

input:checked+.slide-container .nav label {
  display: block;
}

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

.nav-dots .nav-dot {
  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-dots .nav-dot:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked~.nav-dots label#img-dot-1,
input#img-2:checked~.nav-dots label#img-dot-2,
input#img-3:checked~.nav-dots label#img-dot-3,
{
  background: rgba(0, 0, 0, 0.8);
}
<body>

  <h3>Mate</h3>
  <ul class="slides">
    <input type="radio" name="radio-btn" id="img-1" checked />
    <li class="slide-container">
      <div class="slide">
        <img src="http://www.rachelgallen.com/images/babytiger.jpg" />
      </div>
      <div class="nav">
        <label for="img-3" class="prev">&#x2039;</label>
        <label for="img-2" class="next">&#x203a;</label>
      </div>
    </li>
    <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
      <div class="slide">
        <img src="http://www.rachelgallen.com/images/snowdrops.jpg" />
      </div>
      <div class="nav">
        <label for="img-1" class="prev">&#x2039;</label>
        <label for="img-3" class="next">&#x203a;</label>
      </div>
    </li>
    <input type="radio" name="radio-btn" id="img-3" />
    <li class="slide-container">
      <div class="slide">
        <img src="http://www.rachelgallen.com/images/daffodils1.jpg" />
      </div>
      <div class="nav">
        <label for="img-2" class="prev">&#x2039;</label>
        <label for="img-1" class="next">&#x203a;</label>
      </div>
    </li>
    <li class="nav-dots">
      <label for="img-1" class="nav-dot" id="img-dot-1"></label>
      <label for="img-2" class="nav-dot" id="img-dot-2"></label>
      <label for="img-3" class="nav-dot" id="img-dot-3"></label>
    </li>
  </ul>

</body>

Sample fiddle with your css applied

希望对你有帮助

关于html - 从 html 中删除 id 以重用代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45319160/

上一篇：javascript - 重启 css 过渡

下一篇：css - 在较大的父宽度上减小 div 宽度

相关文章：

javascript - KnockoutJS，绑定(bind) View

javascript - 我如何重新排序 bootstrap 3 div？

c++ - 尝试使用带参数的构造函数启动类

java - Onchange 通过带有 jQ​​uery 的选择框获取多个值

java - 每当我修改服务器时，SSE 客户端就会停止工作(服务器发送事件)

javascript - html onclick 运行 javascript 函数不起作用

jquery - 无法将 div 表中的单元格保持在 50%

javascript - 使用 DOM 在子字符串上应用 CSS

C++ 2D Vector 在 vector 中设置一个位置

python - 如何修改类方法？

©2024 IT工具网  联系我们