javascript - 当图像位于中间且有 3 列幻灯片放映时删除标签

标签 javascript html css 

$('#myCarousel').carousel({
  interval: 2000
})

$('.carousel .item').each(function() {
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length > 0) {
    next.next().children(':first-child').clone().appendTo($(this));
  } else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});

clearA();

function clearA() {
  var x = document.getElementsByClassName("active");
  var list = x[0].getElementsByClassName("overlay")[0];
  list.style.display = "none";

}
/* override position and transform in 3.3.x */

.carousel-inner .item.left.active {
  transform: translateX(-33%);
}

.carousel-inner .item.right.active {
  transform: translateX(33%);
}

.carousel-inner .item.next {
  transform: translateX(33%)
}

.carousel-inner .item.prev {
  transform: translateX(-33%)
}

.carousel-inner .item.right,
.carousel-inner .item.left {
  transform: translateX(0);
}

.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

.overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(27, 26, 29, 0.6);
  opacity: 1;
  bottom: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.overlay p {
  text-align: center;
  color: white;
}

.overlay hr {
  width: 20%;
}

.col3 {
  float: left;
  display: block;
  height: 200px;
  width: 33.33%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center fixed;
}

.col-md-4 {
  padding-right: 0px;
  padding-left: 0px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>

<body>

  <div class="col-md-6 col-md-offset-3">
    <div class="carousel slide" id="myCarousel">
      <div class="carousel-inner">
        <div class="item">
          <div class="col-md-4 col3" style="background-image: url(img_nature_wide.jpg);">
            <a class="overlay" href="#">
              <p>Signature</p>
              <hr>
              <p>text here</p>
            </a>
          </div>
        </div>
        <div class="item active">
          <div class="col-md-4 col3" style="background-image: url(img_fjords_wide.jpg);">
            <a class="overlay" href="#">
              <p>Signature</p>
              <hr>
              <p>ext here</p>
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-md-4 col3" style="background-image: url(img_mountains_wide.jpg);">
            <a class="overlay" href="#">
              <p>Signature</p>
              <hr>
              <p>text here</p>
            </a>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
  </div>



</body>

</html>

大家好，我在创建 3 列幻灯片放映时遇到问题。我已经创建了 3 列幻灯片。现在，我希望中间的图像只显示图像而不显示其中的内容。我上面的脚本请看看并给我解决方案。非常感谢。 enter image description here

最佳答案

只需添加此 css:

.active div:nth-child(2) .overlay > *{
  display: none;
}


$('#myCarousel').carousel({
  interval: 2000
})

$('.carousel .item').each(function() {
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length > 0) {
    next.next().children(':first-child').clone().appendTo($(this));
  } else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});

clearA();

function clearA() {
  var x = document.getElementsByClassName("active");
  var list = x[0].getElementsByClassName("overlay")[0];
  list.style.display = "none";

}
/* override position and transform in 3.3.x */

.active div:nth-child(2) .overlay>* {
  display: none;
}

.carousel-inner .item.left.active {
  transform: translateX(-33%);
}

.carousel-inner .item.right.active {
  transform: translateX(33%);
}

.carousel-inner .item.next {
  transform: translateX(33%)
}

.carousel-inner .item.prev {
  transform: translateX(-33%)
}

.carousel-inner .item.right,
.carousel-inner .item.left {
  transform: translateX(0);
}

.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

.overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(27, 26, 29, 0.6);
  opacity: 1;
  bottom: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.overlay p {
  text-align: center;
  color: white;
}

.overlay hr {
  width: 20%;
}

.col3 {
  float: left;
  display: block;
  height: 200px;
  width: 33.33%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center fixed;
}

.col-md-4 {
  padding-right: 0px;
  padding-left: 0px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>

<body>

  <div class="col-md-6 col-md-offset-3">
    <div class="carousel slide" id="myCarousel">
      <div class="carousel-inner">
        <div class="item">
          <div class="col-md-4 col3" style="background-image: url(img_nature_wide.jpg);">
            <a class="overlay" href="#">
              <p>Signature</p>
              <hr>
              <p>text here</p>
            </a>
          </div>
        </div>
        <div class="item active">
          <div class="col-md-4 col3" style="background-image: url(img_fjords_wide.jpg);">
            <a class="overlay" href="#">
              <p>Signature</p>
              <hr>
              <p>ext here</p>
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-md-4 col3" style="background-image: url(img_mountains_wide.jpg);">
            <a class="overlay" href="#">
              <p>Signature</p>
              <hr>
              <p>text here</p>
            </a>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
  </div>



</body>

</html>

关于javascript - 当图像位于中间且有 3 列幻灯片放映时删除标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44814052/

上一篇：javascript - D3 颜色渐变未围绕区域中心形成数学圆

下一篇：javascript - 单击元素内部时，div 不会自动关闭

相关文章：

javascript - 与 http 服务器通信

javascript - 使用 AngularJS 合并来自 WP-API 的结果

javascript - 网页颜色检索适用于 jQuery 但不适用于 javascript

iphone - 为什么包含图像的 anchor 标记在Iphone的邮件应用程序中不起作用？

android - android 4.4.2 中的 webview 卡住

css - 如何在 CSS 中创建进度步骤

javascript - 如果您只是在页面上定义一个新标签会怎样？ (没有网络组件)

javascript - 无法选择下拉值以及如何在选择每个下拉列表后显示动态字段？

html - 将字体应用于带有 HTML 字符和标签的输入字段中的文本

html - 应用于包含图像的 anchor 的轮廓在 Chrome 中的高度不正确

©2024 IT工具网  联系我们