您的位置：首页 > Web前端 > JavaScript

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

2018-12-27 09:58 5299 查看

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

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

实现思路：

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

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

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

实现代码：

[code]<!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）

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航