用纯CSS做的图片切换

 

　　前段时间做了一个用css做的图片切换。

　  我们先来看下html结构：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    <body>

        <input type="radio" name="btn" id="btn1" class="btn1" checked/>
        <input type="radio" name="btn" id="btn2" class="btn2"/>
        <input type="radio" name="btn" id="btn3" class="btn3"/>
        <!--首先我们要先设置几个单选按钮，要注意标签的位置，不能乱-->
        <br />
        <!--一个单选按钮设置两个label，一个放在左边，一个放在右边-->
        
        <!--左边label-->
        <label for="btn1" class="lb1-1">btn1-1</label>
        <label for="btn2" class="lb2-1">btn2-1</label>
        <label for="btn3" class="lb3-1">btn3-1</label>
        
        <!--中间是图片，这里用div代替-->
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        
        <!--右边label-->
        <label for="btn1" class="lb1-2">btn1-2</label>
        <label for="btn2" class="lb2-2">btn2-2</label>
        <label for="btn3" class="lb3-2">btn3-2</label>
    </body>
</html>

 

 　　再看下CSS样式：

　　这里设置了div，跟label的CSS样式：

div{
    display: inline-block; /*将div变成块级行内元素*/
    width: 200px;
    height: 200px;
}
.box1{
    background: #000;
}
.box2{
    background: #008000;
}
.box3{
    background: #ff0000;
}
label{
    padding: 10px;
    background: #ffd700;
}

 

 

　　然后再单选按钮input被checked时触发的效果：

/*按钮显示开始*/
/*再单选按钮input被checked时触发label*/
.btn1:checked~.lb2-2{
    background: #0000ff;
}
.btn2:checked~.lb1-1{
    background: #0000ff;
}
.btn2:checked~.lb3-2{
    background: #0000ff;
}
.btn3:checked~.lb2-1{
    background: #0000ff;
}
.btn3:checked~.lb4-2{
    background: #0000ff;
}
.btn4:checked~.lb3-1{
    background: #0000ff;
}
/*按钮显示结束*/

/*图片显示开始*/
/*再单选按钮input被checked时触发div*/
.btn1:checked~.box1{
    background: #0000ff;
}
.btn2:checked~.box2{
    background: #0000ff;
}
.btn3:checked~.box3{
    background: #0000ff;
}
/*图片显示结束*/

 

 

效果图如下：（蓝色为显示，其他都为隐藏，- -！做的有点难看。通过点击不同按钮实现图片的切换。上面的CSS代码中，可以把background改为display，实现隐藏跟显示）


 
 
 

 

 

 此为不懂js，用css做出来的图片切换，有点蛋疼。

重点在单选按钮input被checked时，利用关系选择符中的兄弟选择符触发其他兄弟元素的属性变化，还有就是html的标签位置，css不能回溯算法什么的（我也不懂），简单说就是不能通过后面控制前面的元素，不能通过子元素控制父元素什么的。所以这里要input标签放在最前面，这样才能通过兄弟选择符控制其他兄弟元素。

就到这了...

 

posted @ 2016-08-30 22:45  mumushi  阅读(13065)  评论(1)  编辑  收藏  举报