css轮播图
全屏轮播图
©
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>播1</title>
<style>
body,figure {
margin: 0;
}
img {
width: 100%;
height: 675px;
}
figcaption {
position: absolute;
/*display: block;
padding: 1em 0;*/
font-size: 30px;
/*text-align: center;*/
top: 0;
width: 100%;
color: red;
}
.gry {
position: relative;
}
.gry > .item {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
transition: 2s;
}
.gry > .item:first-of-type {
position: static;
opacity: 1;
}
.gry > .controls {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.gry > .gry1 {
display: none;
}
.gry .bt {
display: inline-block;
margin: 0 0.02em;
font-size: 3em;
text-decoration: none;
}
.gry > .gry1:target ~ .item {
opacity: 0;
}
.gry > .gry1:nth-of-type(1):target ~ .item:nth-of-type(1) {
opacity: 1;
}
.gry > .gry1:nth-of-type(2):target ~ .item:nth-of-type(2) {
opacity: 1;
}
.gry > .gry1:nth-of-type(3):target ~ .item:nth-of-type(3) {
opacity: 1;
}
</style>
</head>
<body>
<div class="gry">
<div id="d1" class="gry1"></div>
<div id="d2" class="gry1"></div>
<div id="d3" class="gry1"></div>
<figure class="item">
<figcaption>①</figcaption>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1499238325&di=3a9c6c1c39a437d4a9adef87f05f2c06&imgtype=jpg&er=1&src=http%3A%2F%2Fjiuye-res.jikexueyuan.com%2Fzhiye%2Fshowcase%2Fattach-0db130c1-2890-4387-a7b7-30cfed0a2b04.jpg">
</figure>
<figure class="item">
<figcaption>②</figcaption>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=666682499,827523135&fm=26&gp=0.jpg" >
</figure>
<figure class="item">
<figcaption>③</figcaption>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1796820787,2691248551&fm=26&gp=0.jpg">
</figure>
<div class="controls">
<a href="#d1" class="bt">⊙</a>
<a href="#d2" class="bt">⊙</a>
<a href="#d3" class="bt">⊙</a>
</div>
</div>
</body>
</html>
迷你轮播图（稍微改进后的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>播1</title>
<style>
body,figure {
margin: 0;
}
img {
width: 100%;
height: 700px;
}
figcaption {
display: block;
padding: 1em 0;
}
.gry {
position: relative;
}
.gry > .item {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
transition: 2s;
}
.gry > .item:first-of-type {
position: static;
opacity: 1;
}
.gry > .controls {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.gry > .gry1 {
display: none;
}
.gry .bt {
display: inline-block;
margin: 0 0.02em;
font-size: 3em;
text-decoration: none;
}
.gry > .gry1:target ~ .item {
opacity: 0;
}
.gry > .gry1:nth-of-type(1):target ~ .item:nth-of-type(1) {
opacity: 1;
}
.gry > .gry1:nth-of-type(2):target ~ .item:nth-of-type(2) {
opacity: 1;
}
.gry > .gry1:nth-of-type(3):target ~ .item:nth-of-type(3) {
opacity: 1;
}
</style>
</head>
<body>
<div class="gry">
<div id="d1" class="gry1"></div>
<div id="d2" class="gry1"></div>
<div id="d3" class="gry1"></div>
<figure class="item">
<figcaption>壁纸一</figcaption>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1499238325&di=3a9c6c1c39a437d4a9adef87f05f2c06&imgtype=jpg&er=1&src=http%3A%2F%2Fjiuye-res.jikexueyuan.com%2Fzhiye%2Fshowcase%2Fattach-0db130c1-2890-4387-a7b7-30cfed0a2b04.jpg">
</figure>
<figure class="item">
<figcaption>壁纸二</figcaption>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=666682499,827523135&fm=26&gp=0.jpg" >
</figure>
<figure class="item">
<figcaption>壁纸三</figcaption>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1796820787,2691248551&fm=26&gp=0.jpg">
</figure>
<div class="controls">
<a href="#d1" class="bt">o</a>
<a href="#d2" class="bt">o</a>
<a href="#d3" class="bt">o</a>
</div>
</div>
</body>
</html>
