Question

我正在尝试创建一个不使用JavaScript的CSS轮播。轮播中包含用于更改当前图像的按钮，但是此代码有2个问题。

1。一切似乎都正常，但是当我向div中添加动画时（img- 容器）按钮不起作用。

2。如何立即设置标签样式，使它们看起来像单选按钮，将单选按钮放在其中会使标签无用。

我在做错什么，还有其他方法可以实现这一目标？

<html>

<head>
  <style>
    * {
      transition: all 0.2s;
      box-sizing: border-box;
    }
    
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    .container {
      width: 100%;
      position: relative;
      height: 500px;
      border: 1px solid black;
      text-align: center;
    }
    
    .slider,
    .image-container,
    .sliding-img {
      width: 100%;
      height: 100%;
    }
    
    .slideMove {
      position: absolute;
      bottom: 0;
      height: auto;
    }
    
    .select-container {
      width: 100%;
      height: auto;
      position: absolute;
      bottom: 0;
      z-index: 1;
    }
    
    .slider {
      /*height: auto;*/
      overflow: hidden;
    }
    
    .slideMove {
      display: none;
    }
    
    .image-container {
      white-space: nowrap;
      font-size: 0;
      animation: slide 10s infinite alternate;
    }
    
    @keyframes slide {
      10%,
      30% {
        transform: translate(0);
      }
      32%,
      52% {
        transform: translate(-100%);
      }
      54%,
      74% {
        transform: translate(-200%);
      }
      76%,
      100% {
        transform: translate(-300%);
      }
    }
    
    .img-selector {
      display: inline-block;
    }
    
    .sliding-img {
      display: inline-block;
    }
    
    .slider input:nth-child(1):checked~.image-container {
      transform: translateX(0);
    }
    
    .slider input:nth-child(2):checked~.image-container {
      transform: translateX(-100%);
    }
    
    .slider input:nth-child(3):checked~.image-container {
      transform: translateX(-200%);
    }
    
    .slider input:nth-child(4):checked~.image-container {
      transform: translateX(-300%);
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="select-container">
      <label for='1' class="img-selector">img1</label>
      <label for='2' class="img-selector">img2</label>
      <label for='3' class="img-selector">img3</label>
      <label for='4' class="img-selector">img4</label>
    </div>
    <div class="slider">
      <input id='1' class="slideMove" type="radio" name="slider" />
      <input id='2' class="slideMove" type="radio" name="slider" />
      <input id='3' class="slideMove" type="radio" name="slider" />
      <input id='4' class="slideMove" type="radio" name="slider" />
      <div class="image-container">
        <div class="sliding-img" style="background:rgb(20,200,200)">
        </div>
        <div class="sliding-img" style="background:rgb(20,20,200)">
        </div>
        <div class="sliding-img" style="background:rgb(230,20,200)">
        </div>
        <div class="sliding-img" style="background:rgb(10,20,2)">
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

只需将动画：无添加到选中的按钮，就像这样：

 .slider input:nth-child(1):checked~.image-container {
  animation:none;
  transform: translateX(0);
}

带按钮的CSS轮播无法正常工作

1 个答案: