HTML+CSS项目实践五：使用纯CSS实现点击文字切换图片效果（不使用JS）

实现效果：点击文字，切换到对应的图片显示。

如：点击文字1，切换到图片1，点击文字2，切换到图片2，点击文字3，切换到图片3。

实现思路：

1、制作一个div盒子，用来做展示图片的容器。因此盒子的宽高，要和待展示的图片盒子宽高一致。

2、将待展示的内容，放在同一个盒子里。通过文字触发，控制分别展示。（使用ul-li标签）

3、制作按钮文字，并控制点击不同文字时，待展示的内容不一样。

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS实现点击按钮，切换图片</title>
<style type="text/css">
.slide{/*设置播放器盒子slide的样式*/
        position: relative;
        margin:10px auto;
        width: 400px;
        height: 300px;
        text-align: center;
        font-family: Arial;
        color: #FFF;
        overflow: hidden;
    }
.slide ul{
        margin:10px 0;
        padding:0;
        width: 9999px;
        transition:all 0.5s;/*控制所有动画完成时间是0.5秒，即完成一次图片切换勇士0.5秒*/
    }
.slide li{
        float: left;
        width: 400px;
        height: 300px;
        list-style: none;
        line-height: 200px;
        font-size: 36px;
    }
.slide li:nth-child(1){/*:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。*/
        background: #9fa8ef;/*设置背景颜色*/
    }
.slide li:nth-child(2){
		background-image:url(3.jpg);/*设置背景图片*/
    }
.slide li:nth-child(3){
        background: #9fefc3;
    }
.slide input[name="sildeInput"]{
        display: none;
    }

.slide label[for^="sildeInput"]{/*包含sildeInput的，统一进行样式设置，这里即设置文字123的统一样式*/
        position: absolute;
        top:270px;
        width: 20px;
        height: 20px;
        margin: 0 10px;
        line-height: 20px;
        color: #FFF;
        background: #000;
        cursor: pointer;
    }
.slide label[for^="sildeInput"]:hover{ 
		color:#F00;/*控制鼠标悬浮在文字上时，文字颜色变为红色*/
		}
		
@keyframes marginLeft{/*以百分比来规定改变发生的时间，0% 是动画的开始时间，100% 动画的结束时间。*/
        0%，28.5%{margin-left: 0;}
        33.3%，62%{margin-left: -400px;}
        66.7%，95.2%{margin-left: -800px;}
        100%{margin-left: 0;}
    }

/*控制三个文字的样式*/
.slide label[for="sildeInput1"]{
        left: 0;
    }
.slide label[for="sildeInput2"]{
        left: 30px;
    }
.slide label[for="sildeInput3"]{
        left: 60px;
    }
	
/*当点击按钮文字时2，控制ul显示的内容*/
#sildeInput1:checked ~ ul{ margin-left: 0;}
#sildeInput2:checked ~ ul{ margin-left: -400px;}
#sildeInput3:checked ~ ul{ margin-left: -800px;}

</style>
</head>

<body>


<!-- 点击文字，切换图片 -->
<div class="slide">
<!--按钮文字，点击文字，控制图片/内容切换-->
    <input type="radio" name="sildeInput" value="0" id="sildeInput1" checked hidden/>
    <label for="sildeInput1">1</label>

    <input type="radio" name="sildeInput" value="1" id="sildeInput2" hidden/>
    <label for="sildeInput2">2</label>

    <input type="radio" name="sildeInput" value="1" id="sildeInput3" hidden/>
    <label for="sildeInput3">3</label>

<!--进行切换的内容，点击按钮文字时，可以控制显示不同的内容（不同的图片，或不同的文字，或显示不同的版块内容）-->
    <ul>
        <li>one-点击切换</li>
        <li>two-点击切换</li>
        <li>three-点击切换</li>
    </ul>
</div>
</body>
</html>

思考：将自动轮播和点击切换结合在一起使用

扩展知识点：CSS3

参考资料：HTML+CSS项目实践一：单纯利用CSS制作图片轮播效果（不使用JS）

========================这里是结束分割线==============================

HTML+CSS项目实践五：使用纯CSS实现点击文字切换图片效果（不使用JS）

猜你喜欢