纯CSS实现幻灯片效果
程序员文章站
2022-05-26 20:10:16
...
先上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css幻灯片</title>
<link rel="stylesheet" href="">
</head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.myDiv{
position: absolute;
top: 34%;
left: 34%;
}
.Imginner input{
display: none;
}
.Imginner input:checked+img{
display: block;
}
.Imginner img{
width: 500px;
height: 200px;
display: none;
}
.btnContent{
display: flex;
}
.btnContent label{
flex-grow: 1; /*这是flex定位中内容元素进行平分剩余的空间*/
}
</style>
<body>
<div class="myDiv">
<div class="imgContent">
<div class="Imginner">
<input type="radio" name="img" id="img1" checked>
<img src="../images/1.jpg">
</div>
<div class="Imginner">
<input type="radio" name="img" id="img1">
<img src="../images/2.jpg">
</div>
<div class="Imginner">
<input type="radio" name="img" id="img1">
<img src="../images/3.jpg">
</div>
</div>
<div class="btnContent">
<label for="img1">第一张</label>
<label for="img2">第二张</label>
<label for="img3">第三张</label>
</div>
</div>
</body>
</html>
实现的效果:点击第一张文字显示第一个图片,点击第二张文字显示第二张皮片,点击第三张文字显示第三张图片
主要原理就是通过input的radio属性单选框和lable按钮的绑定,点击按钮触发选择input单选框,从而给input单选框的兄弟元素图片比偶爱去哪赋予样式,实现图片的显示和隐藏,再把input单选框隐藏即可简单实现幻灯片特效。
上一篇: 你或许想要用到的三个新的JavaScript API
下一篇: 原生JS实现图片幻灯片效果