各位大佬们 几个重叠的图片 用透明度实现轮播图效果 现在点击轮播图跳转 只会跳放在最上面那个链接 有什么方法可以自己跳自己的

发布于
2019-08-27

不考虑上古浏览器的话，可以用pointer-events来实现：

.banners > a {
  pointer-events: none
}

.banners > a.active {
  pointer-events: auto;
  opacity: 1
}

惊晨舞

4744

发布于
2019-08-26

透明度变的时候，z-index也跟着变一下，当前显示的图片的z-index最高。

rain

5037120243

发布于
2019-08-27

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       
        a {
            display: block;
            width: 200px;
            height: 100px;
            position: absolute;
        }

        a img {
            display: block;
            width: 100%;
            height: 100%;
        }

        a.show {
            opacity: 1;
            z-index: 99;
        }

        a.hide {
            opacity: 0;
            z-index: 1;
        }
    </style>
</head>

<body>
    <a class="show" href="https://baidu.com"> <img src="./1.png" alt=""></a>
    <a class="hide" href="https://segmentfault.com/q/1010000020189052"> <img src="./2.png" alt=""></a>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        setInterval(function () {
            $('a').each(function () {
                if ($(this).hasClass('show')) {
                    $(this).removeClass('show').addClass('hide');
                } else if ($(this).hasClass('hide')) {
                    $(this).removeClass('hide').addClass('show');
                }
            })

        }, 2000);
    </script>
</body>

</html>

大胡子民工潘半仙

4.9k1523

发布于
2019-08-27

我来个纯CSS的版本的吧，另外，在你的实现里面，两个值：

display 为 none 或者 block 之类的，或者 opacity 为 0 或者 1 控制显示还是隐藏
z-index 这个值控制哪一张在最上面，不管你使用JS还是纯CSS都需要控制这个，这个才是可点击轮播的关键核心。

<div>
  <div>
    <ul>
      <li>
        <a href="#"><img src="image-1.jpg" alt="First Image" /></a>
      </li>
      <li>
        <a href="#"><img src="image-2.jpg" alt="Second Image" /></a>
      </li>
      <li>
        <a href="#"><img src="image-3.jpg" alt="Third Image" /></a>
      </li>
      <li>
        <a href="#"><img src="image-4.jpg" alt="Fourth Image" /></a>
      </li>
      <li>
        <a href="#"><img src="image-5.jpg" alt="Fifth Image" /></a>
      </li>
    </ul>
  </div><!-- /.slides -->
  <div></div><!-- /.progress-bar -->
</div><!-- /.slider -->

.slider {
  font-size: 10px;
  background-color: #000;
  border: .5em solid #ddd;
  box-shadow: .1em .1em .5em rgba(0.0.0.0.7);
  height: 32em;
  width: 68em;
  margin: 5em auto 0;
  overflow: visible;
  position: relative;
}

.slides {
  overflow: hidden;
  height: 32em;
}

.slides ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.slides li {
  width: 68em;
  height: 32em;
  position: absolute;
  top: -32.5em;
}

.slides li:first-child {
  animation: first 25s linear infinite;
}
.slides li:nth-child(2) {
  animation: second 25s linear infinite;
}
.slides li:nth-child(3) {
  animation: third 25s linear infinite;
}
.slides li:nth-child(4) {
  animation: fourth 25s linear infinite;
}
.slides li:nth-child(5) {
  animation: fifth 25s linear infinite;
}

.progress-bar {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: .5em;
  background-color: #000;
  animation: progressbar 25s ease-out infinite;
}

/* ANIMATION */
@keyframes first {
  0%  { top:0px; }
  4%  { top:0px; }
  16% { top:0px; opacity:1; z-index:0; }
  20% { top:32.5em; opacity:0; z-index:0; }
  21% { top:-32.5em; opacity:0; z-index:-1; }
  92% { top:-32.5em; opacity:0; z-index:0; }
  96% { top:-32.5em; opacity:0; }
  100%{ top:0px; opacity:1; }

}
@keyframes second {
  0%  { top:-32.5em; opacity:0; }
  16% { top:-32.5em; opacity:0; }
  20% { top:0px; opacity:1; }
  24% { top:0px; opacity:1; }
  36% { top:0px; opacity:1; z-index:0; }
  40% { top:32.5em; opacity:0; z-index:0; }
  41% { top:-32.5em; opacity:0; z-index:-1; }
  100%{ top:-32.5em; opacity:0; z-index:-1; }
}
@keyframes third {
  0%  { top:-32.5em; opacity:0; }
  36% { top:-32.5em; opacity:0; }
  40% { top:0px; opacity:1; }
  44% { top:0px; opacity:1; }
  56% { top:0px; opacity:1; }
  60% { top:32.5em; opacity:0; z-index:0; }
  61% { top:-32.5em; opacity:0; z-index:-1; }
  100%{ top:-32.5em; opacity:0; z-index:-1; }
}
@keyframes fourth {
  0%  { top:-32.5em; opacity:0; }
  56% { top:-32.5em; opacity:0; }
  60% { top:0px; opacity:1; }
  64% { top:0px; opacity:1; }
  76% { top:0px; opacity:1; z-index:0; }
  80% { top:32.5em; opacity:0; z-index:0; }
  81% { top:-32.5em; opacity:0; z-index:-1; }
  100%{ top:-32.5em; opacity:0; z-index:-1; }
}
@keyframes fifth {
  0%  { top:-32.5em; opacity:0; }
  76% { top:-32.5em; opacity:0; }
  80% { top:0px; opacity:1; }
  84% { top:0px; opacity:1; }
  96% { top:0px; opacity:1; z-index:0; }
  100%{ top:32.5em; opacity:0; z-index:0; }
}

@keyframes progressbar {
  0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
  4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
 16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
 17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
 18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}