Question

看起来像这样：https://gyazo.com/c56735687c7be879ddc2d544e1cd921d

我试图在点击不同的按钮/收音机时更改图片，但到目前为止它还没有工作。我被告知这可以完全由css / html完成，所以我试着跟着它，但它失败了。

这是关于jsfiddle的代码：https://jsfiddle.net/4keh0uos/1/

<div class = "fb featured_box1">
                <input type = "radio"  class = "radiobox" id = "slider1" name ="fpslider"        checked>
                <input type = "radio"  class = "radiobox" id = "slider2" name ="fpslider" >
                <input type = "radio"  class = "radiobox" id = "slider3" name ="fpslider">
                <input type = "radio"  class = "radiobox" id = "slider4" name ="fpslider">

            <div class = "picsliders">
                <div id = "picslider1">
                    <a href = "#"><img src = "arsz_goblin.jpg" alt = ""/></a>
                </div>
                <div id = "picslider2">
                    <a href = "#"><img src = "arsz_hearthstone-wallpaper.jpg" alt = ""/> </a>
                </div>
            </div>

CSS：

.radiobox{
position: absolute;
bottom: 8px;
left: 50%;
margin-left: -49.5px;
z-index: 55;
}
#slider1{
    /*Inherit from radio box, so there is nothing to write */
}

#slider2{
    position: absolute;
    bottom: 8px;
    left: 52%;
}

我做错了什么想法？

Answer 1

您忘了制作幻灯片opacity: 0的默认状态，但我建议您使用display: none和display: block。

您的小提琴的更新版本：https://jsfiddle.net/fadil/6jnnq1fp/

单击其他按钮/收音机时，图片不会发生变化

1 个答案: