Question

我正在学习CSS。我正在尝试制作图像滑块，但它无法正常工作。我不知道我的代码有什么问题。

当我选择第2，第3，第4按钮时，图像不会改变。我不知道我的代码有什么问题。

JSfinddle Link：Here

HTML

<section class="container">

    <input type="radio" id="radio1" name="image-radio" class="radio-image-1" checked="checked">
    <label for="radio1" class="label-image-1">1</label>
    <input type="radio" id="radio2" name="image-radio" class="radio-image-2">
    <label for="radio2" class="label-image-2">2</label>
    <input type="radio" id="radio3" name="image-radio" class="radio-image-3">
    <label for="radio3" class="label-image-3">3</label>
    <input type="radio" id="radio4" name="image-radio" class="radio-image-4">
    <label for="radio4" class="label-image-4">4</label>

            <div class="clearfix"></div>

    <div class="image-in-slider">
        <div>
            <span class="img1">1</span>
        </div>
        <div id="hey">
            <span class="img2">2</span>
        </div>
        <div>
            <span class="img3">3</span>
        </div>
        <div>
            <span class="img4">4</span>
        </div>
    </div>

</section>

CSS

.container  {
    width: 600px;
    height: 400px;
    margin: 0 auto;
    top: 200px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
    border: 20px solid #fff;
    position: relative;
}

.container input {
    display: none;
}

.container label {
    font-style: italic;
    width: 150px;
    height: 30px;
    cursor: pointer;
    z-index: 1000;
    position: relative;
    color: black;
    float: left;
    line-height: 32px;
    font-size: 24px;
    margin-top: 350px;
}

.container label:before {
    content:"";
    width: 34px;
    height: 34px;
    background: rgba(130,195,217,0.9);
    position: absolute;
    border-radius: 50%;
    margin-left: -17px;
    left: 50%;
    box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
    z-index: -1;
}

.container label:after {
    height: 400px;
    content: "";
    background: linear-gradient(rgba(255,255,255,0.3) 0%, rgba(255,255,255,1) 100%);
    position: absolute;
    bottom: -20px;
    right: 0px;
}

.clearfix {
    clear: both;
}

.container input.radio-image-1:checked ~ label.label-image-1,
.container input.radio-image-2:checked ~ label.label-image-2,
.container input.radio-image-3:checked ~ label.label-image-3,
.container input.radio-image-4:checked ~ label.label-image-4 {
    color: #68abc2;
}

.container input.radio-image-1:checked ~ label.label-image-1:before,
.container input.radio-image-2:checked ~ label.label-image-2:before,
.container input.radio-image-3:checked ~ label.label-image-3:before,
.container input.radio-image-4:checked ~ label.label-image-4:before {
    background-color: #fff;
    box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
}

.image-in-slider {
    width: 600px;
    height: 400px;
    position: absolute;
    float: left;
    overflow: hidden;
    background-repeat: no-repeat;
    margin-top: 0px;
    top: 0px;
    left: 0px;
}

.image-in-slider div {
    width: 100%;
    height: 100%;
    position: relative;
    float: left;
    overflow: hidden;
    background-repeat: no-repeat;
}

.image-in-slider div span {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 2;
    text-indent: -9000px;
}

.container input.radio-image-1:checked ~ .image-in-slider,
.image-in-slider .img1 {
    background-image: url(http://s23.postimg.org/kvzwiar2z/image1.jpg);
}
.container input.radio-image-2:checked ~ .image-in-slider,
.image-in-slider .img2 {
    background-image: url(http://s23.postimg.org/cgexejdln/image2.jpg);
}
.container input.radio-image-3:checked ~ .image-in-slider,
.image-in-slider .img3 {
    background-image: url(http://s23.postimg.org/my0dwjp23/preview_Image_996.jpg);
}
.container input.radio-image-4:checked ~ .image-in-slider,
.image-in-slider .img4 {
    background-image: url(http://s23.postimg.org/7dt060exn/YSAM_0177_600px.jpg);
}

请帮忙。谢谢:)）

Answer 1

删除

.image-in-slider,

来自

.container input.radio-image-1:checked ~ .image-in-slider,
.image-in-slider .img1 {
    background-image: url(http://s23.postimg.org/kvzwiar2z/image1.jpg);
}

并将结尾'/'添加到input元素。 http://jsfiddle.net/LusL3s99/5/

我的css幻灯片不起作用

1 个答案: