纯CSS中图像滑块下的进度条

Question

我想在纯CSS中的滑块下创建一个进度条。我的滑块中有两个图像，当显示第一个图像时，条形必须为50％，显示第二个图像时为100％。

然而，由于预期的第二图像栏无法显示，该栏将不会切换到它（像滑块正常工作）

你能帮我什么时候调整？

谢谢！ 奥黛丽

#slider { 
 
\t  position: relative;  
 
\t  width: 100%;   
 
\t  height: 400px;  
 
\t  overflow: hidden;  
 
    } 
 

 
    #images_slider { 
 
\t  position: absolute; 
 
\t  top: 0;    
 
\t  left: 0;    
 
\t  margin: 0;    
 
\t  padding: 0; 
 
     width: 100%;   
 
\t  height: 400px; \t 
 
    } 
 

 
    #images_slider li { 
 
\t  display: flex;  
 
    } 
 

 
    #images_slider img { 
 
\t  width: 100%; 
 
\t  height: 450px; 
 
    } 
 

 
    #image_gars:target #image_fille { 
 
\t  left: -150%; 
 
    } 
 

 
    #banniere #bouton_prev { 
 
\t  position: absolute; 
 
\t  left : 0; 
 
\t  top: 42%; 
 
\t  border : solid rgba(153,153,153,0.2) 0.1px; 
 
\t  background-color: rgba(153,153,153,0.2); 
 
\t  width: 25px; 
 
\t  height: 50px; 
 
\t  border-top-right-radius: 100px; 
 
     border-bottom-right-radius: 100px; 
 
     padding-top: 10px; 
 
     padding-right: 5px; 
 
     z-index: 6; 
 
    } 
 

 
    .fa.fa-chevron-left { 
 
\t  position: absolute; 
 
\t  left : 0; 
 
\t  top: 45%; 
 
\t  margin-left: 5px; 
 
\t  color: white; 
 
\t  z-index: 4; 
 
    } 
 

 
    #banniere #bouton_next { 
 
\t  position: absolute; 
 
\t  right: 0; 
 
\t  top: 42%; 
 
\t  border : solid rgba(153,153,153,0.2) 0.1px; 
 
\t  background-color: rgba(153,153,153,0.2); 
 
\t  border-top-left-radius: 100px; 
 
     border-bottom-left-radius: 100px; 
 
     padding-top: 10px; 
 
     padding-left: 5px; 
 
     width: 25px; 
 
\t  height: 50px; 
 
\t  z-index: 6; 
 
    } 
 

 
    .fa.fa-chevron-right { 
 
\t  position: absolute; 
 
\t  right: 0; 
 
\t  top: 45%; 
 
\t  color: white; 
 
\t  margin-right: 5px; 
 
\t  z-index: 4; 
 
    } 
 

 
    #ProgressBar { 
 
     width: 100%; 
 
     height: 5px; 
 
     background-color: #A6A6A6; 
 
    } 
 

 
    #Progress { 
 
     width: 50%; 
 
     background-color: rgb(53,151,183); 
 
     height: 100%; 
 
    } 
 

 
    #bouton_next:target #Progress { 
 
     width: 100%; 
 
     background-color: blue; 
 
     height: 100%; 
 
    }

<div id="banniere"> 
 
     <div id="slider"> 
 
      <ul id="images_slider"> 
 
       <li><img src="images/slider/fillepeinture.jpg" alt="Petite fille avec les mains pleine de peinture" id="image_fille"/></li>  
 
       <li><img src="images/slider/garconmegaphone.jpg" alt="Petit garçon avec un mégaphone" id="image_gars"/></li> 
 
      </ul> 
 
     </div> 
 

 
     <a href="#image_fille" id="bouton_prev"></a> 
 
     <a href="#image_gars" id="bouton_next"></a> 
 

 
     <i class="fa fa-chevron-right" aria-hidden="true"></i> 
 
     <i class="fa fa-chevron-left" aria-hidden="true"></i> 
 
    </div> 
 

 
    <div id="ProgressBar"> 
 
     <div id="Progress"></div> 
 
    </div> 
 

 

Answer 1

我又刺在此。当你指出重复ID是一个问题时，你是对的。由于锚点可以定位多个ID，事实证明它们都不是有针对性的。

我添加了一个包含分区现在携带触发ID，并被重新加工的图像和进度的div的CSS使用容器的目标状态来接通和关断：

#ProgressBar div { 
 
    border: 1px solid black; 
 
    color: red; 
 
    font-style: italic; 
 
} 
 

 
#ProgressBar .image_fille { 
 
    width: 50%; 
 
} 
 

 
#ProgressBar .image_gars { 
 
    width: 100%; 
 
} 
 

 
.container .image_fille { 
 
    display: block; 
 
} 
 

 
.container .image_gars { 
 
    display: none; 
 
} 
 

 
.container:target .image_fille { 
 
    display: none; 
 
} 
 

 
.container:target .image_gars { 
 
    display: block; 
 
}

<div class="container" id="image_gars"> 
 
    <div id="banniere"> 
 
    <img class="image_fille" src="" alt="image fille" /> 
 
    <img class="image_gars" src="" alt="image gars" /> 
 

 
    <a href="#image_fille" id="bouton_prev">bouton prev</a> 
 
    <a href="#image_gars" id="bouton_next">bouton next</a> 
 
    </div> 
 

 
    <div id="ProgressBar"> 
 
    <div class="image_fille">half progress</div> 
 
    <div class="image_gars">full progress</div> 
 
    </div> 
 
</div>