html - Css 轮播问题

标签 html css

我正在开发我的自定义网站并开发了一个纯 CSS 轮播。有一个问题，每当我导航到第二张图片时，位置就不会保持固定。 :( 它变为底部，我的意思是位置变为底部。请帮我解决这个问题，有没有办法在其中添加自动滚动？？这是代码:

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/

最佳答案

干得漂亮。

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

对于自动滚动，如果您不尝试使用 javascript，则可以在悬停时使用关键帧应用 css 动画。

关于 css 选择器，尽可能使用子选择器 (a > b)。它比后代选择器 (a b) 更有效

顺便说一句，这是轮播的变体，没有 li 元素包裹 anchor ，使用 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;
}

关于html - Css 轮播问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21139413/

上一篇：css - 水平 'Sub Menu' 导航

下一篇：php - 谷歌图表时间轴 : how can I left-justify the row labels

相关文章：

javascript - 在表单加载时在 jQuery 中切换

css - bootstrap 4 将 ul 列表转换为移动设备的列

html - HTML 签名和 outlook 2010 的主要问题

html - 表头 colspan 和 rowspan 固定位置可滚动

html - 如何使用完全环绕主图像的 flexbox 创建图像网格？

HTML & CSS Div 类未加入

html - 固定位置宽度

css - 带边框图像的 Div

Javascript 使用 if 语句更改样式表

css - 一旦将图像设置为百分比大小，是否有办法将图像恢复为原始大小？

©2024 IT工具网  联系我们