ID與帶圖像滑塊的類

-2
我試圖用HTML和CSS實現多個圖像滑塊。我能夠得到一個圖像滑塊，但當我嘗試在html文檔中使用多個滑塊時，控件從一個滑塊移動到另一個滑塊。我認爲這與創建ID's和類...有關？ID與帶圖像滑塊的類
任何與此有關的幫助將是真棒，非常感謝！請參見下面的代碼：
HTML：
<html> 
    <head> 
    <title>My Now Amazing Webpage</title> 
    <link rel="stylesheet" type="text/css" href="css/please.css"/> 
    </head> 
<body> 

    <article id=slider>  

     <!-- Slider Setup --> 

     <input checked type=radio name=slider id=slide1 /> 
     <input type=radio name=slider id=slide2 /> 
     <input type=radio name=slider id=slide3 /> 
     <input type=radio name=slider id=slide4 /> 
     <input type=radio name=slider id=slide5 /> 


     <!-- The Slider --> 
     <div id=slides>  
      <div id=overflow> 

       <div class=inner>    
        <article> 
         <img src="images/swiftlogo.png" /> 
        </article>     
        <article> 
         <img src="images/UXicon.png" /> 
        </article>     
        <article> 
         <img src="images/xcodelogo.png" /> 
        </article> 
        <article> 
         <img src="images/globe-homescreen.png" /> 
        </article> 
       </div> <!-- .inner --> 
      </div> <!-- #overflow --> 
     </div> <!-- #slides --> 
     <!-- Controls and Active Slide Display --> 


     <div id=controls> 

      <label for=slide1></label> 
      <label for=slide2></label> 
      <label for=slide3></label> 
      <label for=slide4></label> 
      <label for=slide5></label> 

     </div> <!-- #controls --> 

     <div id=active> 

      <label for=slide1></label> 
      <label for=slide2></label> 
      <label for=slide3></label> 
      <label for=slide4></label> 
      <label for=slide5></label> 

     </div> <!-- #active --> 
    </article> 



<article id=slider>  

     <!-- Slider Setup --> 

     <input checked type=radio name=slider id=slide1 /> 
     <input type=radio name=slider id=slide2 /> 
     <input type=radio name=slider id=slide3 /> 
     <input type=radio name=slider id=slide4 /> 
     <input type=radio name=slider id=slide5 /> 


     <!-- The Slider --> 
     <div id=slides>  
      <div id=overflow> 

       <div class=inner>    
        <article> 
         <img src="images/swiftlogo.png" /> 
        </article>     
        <article> 
         <img src="images/UXicon.png" /> 
        </article>     
        <article> 
         <img src="images/xcodelogo.png" /> 
        </article> 
        <article> 
         <img src="images/globe-homescreen.png" /> 
        </article> 
       </div> <!-- .inner --> 
      </div> <!-- #overflow --> 
     </div> <!-- #slides --> 
     <!-- Controls and Active Slide Display --> 


     <div id=controls> 

      <label for=slide1></label> 
      <label for=slide2></label> 
      <label for=slide3></label> 
      <label for=slide4></label> 
      <label for=slide5></label> 

     </div> <!-- #controls --> 

     <div id=active> 

      <label for=slide1></label> 
      <label for=slide2></label> 
      <label for=slide3></label> 
      <label for=slide4></label> 
      <label for=slide5></label> 

     </div> <!-- #active --> 
    </article> 

    </body> 
</html> 


CSS: 

/* CSS */ 



#slider { 
    text-align: center; 
} 

label, a { 
    color: teal; 
    cursor: pointer; 
    text-decoration: none; 
} 
label:hover, a:hover { 
    color: #000 !important; 
} 
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 
label, #active, img { -moz-user-select:none;-webkit-user-select:none; } 
.catch { display: block; height: 0; overflow: hidden; } 
#slider { 
    margin: 0 auto; 
    width:340px; 
} 


/* NEW EXPERIMENT */ 
/* Slider Setup */ 

input { 
    display: none; 
} 

#slide1:checked ~ #slides .inner { margin-left:0; } 
#slide2:checked ~ #slides .inner { margin-left:-100%; } 
#slide3:checked ~ #slides .inner { margin-left:-200%; } 
#slide4:checked ~ #slides .inner { margin-left:-300%; } 
#slide5:checked ~ #slides .inner { margin-left:-400%; } 

#overflow { 
    width: 100%; 
    overflow: hidden; 
} 

article img { 
    width: 100%; 
} 

#slides .inner { 
    width: 500%; 
    line-height: 0; 
} 

#slides article { 
    width: 20%; 
    float: left; 
} 

/* Slider Styling */ 

/* Control Setup */ 

#controls { 
    margin: 5% 0 0 0; 
    width: 100%; 
    height: 60px; 
} 

#controls label { 
    display: none; 
    width: 20px; 
    height: 20px; 
    opacity: 0.7; 
} 

#active { 
    margin: 10px 0 0; 
    text-align: center; 
    display:none; 
} 

#active label { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    display: inline-block; 
    width: 10px; 
    height: 10px; 
    background: #bbb; 
} 

#active label:hover { 
    background: #ccc; 
    border-color: #777 !important; 
} 

#controls label:hover { 
    opacity: 1; 

} 

#slide1:checked ~ #controls label:nth-child(2), 
#slide2:checked ~ #controls label:nth-child(3), 
#slide3:checked ~ #controls label:nth-child(4), 
#slide4:checked ~ #controls label:nth-child(5), 
#slide5:checked ~ #controls label:nth-child(1) { 
    background: url('http://www.phlume.com/chad/testtest/next.png') no-repeat; 
    float: right; 
    margin: 0 10px 0 0; 
    display: block; 
} 


#slide1:checked ~ #controls label:nth-child(5), 
#slide2:checked ~ #controls label:nth-child(1), 
#slide3:checked ~ #controls label:nth-child(2), 
#slide4:checked ~ #controls label:nth-child(3), 
#slide5:checked ~ #controls label:nth-child(4) { 
    background: url('http://www.phlume.com/chad/testtest/prev.png') no-repeat; 
    float: left; 
    margin: 0 0 0 10px; 
    display: block; 
} 

#slide1:checked ~ #active label:nth-child(1), 
#slide2:checked ~ #active label:nth-child(2), 
#slide3:checked ~ #active label:nth-child(3), 
#slide4:checked ~ #active label:nth-child(4), 
#slide5:checked ~ #active label:nth-child(5) { 
    background: #333; 
    border-color: #333 !important; 
} 



/* Slider Styling */ 

#slides { 
    margin: 45px 0 0; 
    x-webkit-border-radius: 5px; 
    x-moz-border-radius: 5px; 
    xborder-radius: 5px; 
    xbox-shadow: 1px 1px 4px #666; 
    padding: 1%; 
    background: #fff; 
} 


/* Animation */ 

#slides .inner { 
    -webkit-transform: translateZ(0); 
    -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
     transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ 

    -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
     transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ 
} 

#slider { 
    -webkit-transform: translateZ(0); 
    -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.5s ease-out; 
    -o-transition: all 0.5s ease-out; 
    transition: all 0.5s ease-out; 
} 

#controls label{ 
    -webkit-transform: translateZ(0); 
    -webkit-transition: opacity 0.2s ease-out; 
    -moz-transition: opacity 0.2s ease-out; 
    -o-transition: opacity 0.2s ease-out; 
    transition: opacity 0.2s ease-out; 
} 

#slide1:checked ~ #slides article:nth-child(1) .info, 
#slide2:checked ~ #slides article:nth-child(2) .info, 
#slide3:checked ~ #slides article:nth-child(3) .info, 
#slide4:checked ~ #slides article:nth-child(4) .info, 
#slide5:checked ~ #slides article:nth-child(5) .info { 
    opacity: 1; 
    -webkit-transition: all 1s ease-out 0.6s; 
    -moz-transition: all 1s ease-out 0.6s; 
    -o-transition: all 1s ease-out 0.6s; 
    transition: all 1s ease-out 0.6s; 
} 

.info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile { 
    -webkit-transform: translateZ(0); 
    -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.5s ease-out; 
    -o-transition: all 0.5s ease-out; 
    transition: all 0.5s ease-out; 
} 


@media only screen and (max-width: 850px) and (min-width: 450px) { 

    #slider #controls { 

     height: 50px; 
    } 

    #slider #controls label { 
     -moz-transform: scale(0.8); 
     -webkit-transform: scale(0.8); 
     -o-transform: scale(0.8); 
     -ms-transform: scale(0.8); 
     transform: scale(0.8); 
    } 

    #slider #slides { 
     padding: 1% 0; 
     -webkit-border-radius: 0px; 
     -moz-border-radius: 0px; 
     border-radius: 0px; 
    } 

    #slider #active { 
     margin: 22% 0 0; 
    } 

} 

/* Mobile */ 

#mobile:checked ~ #slider #controls { 
    margin: -28% 0 0 24%; 
    width: 50%; 
    height: 50px; 
} 

#mobile:checked ~ #slider #active { 
    margin: 23% 0 0; 
} 

#mobile:checked ~ #slider #slides .info { 
    opacity: 0 !important; 
} 

#mobile:checked ~ #slider #controls label { 
    -moz-transform: scale(0.6); 
    -webkit-transform: scale(0.6); 
    -o-transform: scale(0.6); 
    -ms-transform: scale(0.6); 
    transform: scale(0.6); 
} 


@media only screen and (max-width: 450px) { 

    #slider #controls { 

     height: 50px; 
    } 

    #slider #active { 
     margin: 23% 0 0; 
    } 

    #slider #slides { 
     padding: 1% 0; 
     -webkit-border-radius: 0px; 
     -moz-border-radius: 0px; 
     border-radius: 0px; 
    } 

    #slider #slides .info { 
     opacity: 0 !important; 
    } 

    #slider #controls label { 
     -moz-transform: scale(0.6); 
     -webkit-transform: scale(0.6); 
     -o-transform: scale(0.6); 
     -ms-transform: scale(0.6); 
     transform: scale(0.6); 
    } 

} 


@media only screen and (min-width: 850px) { 

    body { 
     padding: 0 0px; 
    } 
}
來源
2014-10-20 user3708224
答案很簡單，一個ID可以使用一次在一個HTML文件，一個類可以多次使用。
來源
2014-10-20 20:25:35
是的，我知道，但由於某種原因，我遇到了麻煩......但我得到了它的工作。謝謝 – user3708224 2014-10-20 21:45:19
ID與帶圖像滑塊的類

回答

相關問題
