Css Carousel问题

Question

我正在开发我的自定义网站并开发了一个纯粹的css Carousel。有一个问题是，无论何时我导航到第二张图像，位置都不会保持固定。 :(它更改为底部我的意思是位置更改为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

干得好。

我不明白你底部的问题。我找不到问题（使用chrome）。

用于自动滚动，如果你没有尝试使用javascript，那么你可以在悬停时使用关键帧来应用css动画。

关于css选择器，尽可能使用子选择器（a＆gt; b）。它比后代选择器（a b）

更有效

顺便说一句，这里是旋转木马的变体，没有li元素包裹锚点，使用display：inline：block。 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;
}