Css旋轉木馬問題

Question

我正在開發我的自定義網站並開發了一個純CSS的旋轉木馬。有一個問題，無論我何時導航到第二張圖片，位置都不會保持不變。 :(它變成底部我的意思是bottom.Please位置的變化幫我解決這個問題，是有什麼辦法可以添加自動滾動它 - 這是代碼：

HTML：

<div id="slider"> 

     <!-- Sildes --> 
     <img id="one" src="image Url 1" /> 
     <img id="two" src="image Url 2" /> 
     <img id="three" src="image Url 3" /> 
     <img id="four" src="image Url 4" /> 
     <img id="five " src="image Url 5" /> 

     <!-- Links for the slides! --> 
     <ul> 
      <li> 
       <a href="#one"></a> 
      </li> 
      <li> 
       <a href="#two"></a> 
      </li> 
      <li> 
       <a href="#three"></a> 
      </li> 
      <li> 
       <a href="#four"></a> 
      </li> 
      <li> 
       <a href="#five"></a> 
      </li> 
     </ul> 
    </div> 

的CSS：

#slider { 
     width: 640px; 
     height: 320px; 
     margin: 50px auto 0; 
     position: relative; 
     background: #fff; 
     box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); 
     -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); 
     -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); 
    } 

    #slider:before, #slider:after { 
     content: ''; 
     position: absolute; 
     width: 60%; 
     height: 20px; 
     -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); 
     -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); 
     -ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); 
     -o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); 
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); 
     -webkit-transform: rotate(-4deg) skew(-10deg); 
     -moz-transform: rotate(-4deg) skew(-10deg); 
     -o-transform: rotate(-4deg) skew(-10deg); 
     -ms-transform: rotate(-4deg) skew(-10deg); 
     transform: rotate(-4deg) skew(-10deg); 
     left: 10px; 
     bottom: 13px; 
     z-index: -1; 
    } 

    #slider:after { 
     left: auto; 
     right: 10px; 
     -webkit-transform: rotate(4deg) skew(10deg); 
     -moz-transform: rotate(4deg) skew(10deg); 
     -o-transform: rotate(4deg) skew(10deg); 
     -ms-transform: rotate(4deg) skew(10deg); 
     transform: rotate(4deg) skew(10deg); 
    } 

    #slider ul { 
     width: 140px; 
     height: 40px; 
     padding: 0 0 0 0; 
     position: absolute; 
     z-index: 10; 
     list-style: none; 
     left: 50%; 
     margin-left: -70px; 
     bottom: -60px; 
    } 

    #slider ul li:first-child { 
     margin-left: 16px; 
    } 

    #slider ul li { 
     float: left; 
     margin-right: 12px; 
     margin-top: 14px; 
    } 

    #slider ul li:last-child { 
     margin-right: 0; 
    } 

    #slider ul li a { 
     width: 12px; 
     height: 12px; 
     display: block; 
     outline: none; 
     border: none; 
     position: relative; 
     z-index: 2; 
     background: #aaa; 
     box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white; 
     -moz-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white; 
     -webkit-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white; 
     -webkit-border-radius: 50%; 
     -moz-border-radius: 50%; 
     border-radius: 50%; 
    } 

    #slider ul li a:hover { 
     background: #888; 
    } 

    #slider img { 
     position: absolute; 
     left: 0; 
     top: 0; 
     opacity: 0; 
     -webkit-transform: rotateZ(-10deg); 
     -moz-transform: rotateZ(-10deg); 
     -ms-transform: rotateZ(-10deg); 
     -o-transform: rotateZ(-10deg); 
     transform: rotateZ(-10deg); 
     -webkit-transition: all .5s ease; 
     -moz-transition: all .5s ease; 
     -ms-transition: all .5s ease; 
     -o-transition: all .5s ease; 
     transition: all .5s ease; 
    } 

    #slider img:target { 
     opacity: 1; 
     -webkit-transform: rotateZ(0); 
     -moz-transform: rotateZ(0); 
     -ms-transform: rotateZ(0); 
     -o-transform: rotateZ(0); 
     transform: rotateZ(0); 
    } 

    #slider img#five { 
     opacity: 1; 
     -webkit-transform: rotateZ(0); 
     -moz-transform: rotateZ(0); 
     -ms-transform: rotateZ(0); 
     -o-transform: rotateZ(0); 
     transform: rotateZ(0);} 

    #slider img:not(:target), #slider img:target ~ img#five { 
     opacity: 0; 
     -webkit-transform: rotateZ(-10deg); 
     -moz-transform: rotateZ(-10deg); 
     -ms-transform: rotateZ(-10deg); 
     -o-transform: rotateZ(-10deg); 
     transform: rotateZ(-10deg); 
    } 

    #slider ul li a[href="#five"] { 
     background: #777; 
    } 

    #one:target ~ ul li a[href="#one"], 
    #two:target ~ ul li a[href="#two"], 
    #three:target ~ ul li a[href="#three"], 
    #four:target ~ ul li a[href="#four"], 
    #five:target ~ ul li a[href="#five"] { 
     background: #777; 
    } 

    #two:target ~ ul li a[href="#five"], 
    #three:target ~ ul li a[href="#five"], 
    #four:target ~ ul li a[href="#five"], 
    #one:target ~ ul li a[href="#five"] { 
     background: #aaa; 
    } 

http://jsfiddle.net/NaL88/

Answer 1

尼斯工作

我不明白你問題的底部。我無法找到問題（使用鉻）。

用於自動滾動，如果您嘗試不使用JavaScript，則可以使用懸停時使用關鍵幀的CSS動畫。

關於css選擇器，儘可能使用子選擇器（a> b）。它比後代選擇器（a b）效率更高

順便說一下，這裏是使用display：inline：block顯示的沒有li元素包裝錨點的輪播的變體。少DOM深度，更少的元件=更高效

fiddle

HTML：

<div id="slider"> 

    <!-- Sildes --> 
    <img id="one" src="http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg" /> 
    <img id="two" src="http://cssdeck.com/uploads/media/items/4/40Ly3VB.jpg" /> 
    <img id="three" src="http://cssdeck.com/uploads/media/items/0/00kih8g.jpg" /> 
    <img id="four" src="http://cssdeck.com/uploads/media/items/2/2rT2vdx.jpg" /> 
    <img id="five" src="http://cssdeck.com/uploads/media/items/8/8k3N3EL.jpg" /> 

    <!-- Links for the slides! --> 
    <section> 
      <a href="#one"></a> 

      <a href="#two"></a> 

      <a href="#three"></a> 

      <a href="#four"></a> 

      <a href="#five"></a> 

    </section> 
</div> 

CSS：

 #slider { 
    width: 640px; 
    height: 320px; 
    margin: 50px auto 0; 
    position: relative; 
    background: #fff; 

    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); 
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); 
} 

#slider:before, #slider:after { 
    content: ''; 
    position: absolute; 

    width: 60%; 
    height: 20px; 

    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); 
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); 
    -ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); 
    -o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); 

    -webkit-transform: rotate(-4deg) skew(-10deg); 
    -moz-transform: rotate(-4deg) skew(-10deg); 
    -o-transform: rotate(-4deg) skew(-10deg); 
    -ms-transform: rotate(-4deg) skew(-10deg); 
    transform: rotate(-4deg) skew(-10deg); 

    left: 10px; 
    bottom: 13px; 
    z-index: -1; 
} 

#slider:after { 
    left: auto; 
    right: 10px; 

    -webkit-transform: rotate(4deg) skew(10deg); 
    -moz-transform: rotate(4deg) skew(10deg); 
    -o-transform: rotate(4deg) skew(10deg); 
    -ms-transform: rotate(4deg) skew(10deg); 
    transform: rotate(4deg) skew(10deg); 
} 

#slider section { 
    width: 140px; 
    height: 40px; 
    padding: 0 0 0 0; 
    position: absolute; 
    z-index: 10; 
    list-style: none; 

    left: 50%; 
    margin-left: -70px; 
    bottom: -60px; 
} 

#slider > section > a { 
    width: 12px; 
    height: 12px; 
    display: inline-block; 
    outline: none; 
    border: none; 
    position: relative; 
    z-index: 2; 
    background: #aaa; 

    box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white; 
    -moz-box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white; 
    -webkit-box-shadow: inset 0 1px 1px 0px rgba(0,0,0,0.6), 0px 1px 1px 0px white; 

    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 

} 

#slider > section > a:hover { 
    background: #888; 
} 

#slider img { 
    position: absolute; 
    left: 0; 
    top: 0; 
    opacity: 0; 
    -webkit-transform: scale(1.2,1.2); 
    -moz-transform: scale(1.2,1.2); 
    -ms-transform: scale(1.2,1.2); 
    -o-transform: scale(1.2,1.2); 
    transform: scale(1.2,1.2); 

    -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -ms-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease; 
} 

#slider img:target { 
    opacity: 1; 
    -webkit-transform: scale(1,1); 
    -moz-transform: scale(1,1); 
    -ms-transform: scale(1,1); 
    -o-transform: scale(1,1); 
    transform: scale(1,1); 
} 

#slider img#five { 
    opacity: 1; 
    -webkit-transform: scale(1,1); 
    -moz-transform: scale(1,1); 
    -ms-transform: scale(1,1); 
    -o-transform: scale(1,1); 
    transform: scale(1,1); 
} 

#slider img:not(:target), #slider img:target ~ img#five { 
    opacity: 0; 
    -webkit-transform: scale(1.2,1.2); 
    -moz-transform: scale(1.2,1.2); 
    -ms-transform: scale(1.2,1.2); 
    -o-transform: scale(1.2,1.2); 
    transform: scale(1.2,1.2); 
} 

#slider > section > a[href="#five"] { 
    background: #777; 
} 

#one:target ~ section > a[href="#one"], 
#two:target ~ section > a[href="#two"], 
#three:target ~ section > a[href="#three"], 
#four:target ~ section > a[href="#four"], 
#five:target ~ section > a[href="#five"] { 
    background: #777; 
} 

#two:target ~ section > a[href="#five"], 
#three:target ~ section > a[href="#five"], 
#four:target ~section > a[href="#five"], 
#one:target ~ section > a[href="#five"] { 
    background: #aaa; 
}