首页 > 代码库 > 用纯CSS做的图片切换
用纯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标签放在最前面，这样才能通过兄弟选择符控制其他兄弟元素。
就到这了...
<style></style>
用纯CSS做的图片切换
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。