如果这样的结构如何实现效果

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>CSS实现图片滑动</title>
<meta name="generator" content="EverEdit" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="1.css" type="text/css" media=""/>
</head>
<body>
<header>
<h1>SLIDING IMAGE PANELS <span>WITH CSS3</span></h1>
<nav>
<a href="index1.html">Demon 1</a>
<a href="index2.html">Demon 2</a>
<a href="index3.html">Demon 3</a>
<a href="index4.html">Demon 4</a>
</nav>
</header>
<section>
<div>
<label for="img-1">1</label>
<input type="radio" name="radio-set" id="img-1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<label for="img-2">2</label>
<input type="radio" name="radio-set" id="img-2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<label for="img-3">3</label>
<input type="radio" name="radio-set" id="img-3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<label for="img-4">4</label>
<input type="radio" name="radio-set" id="img-4">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</section>
</body>
</html>

section {
	width: 600px;
	height: 400px;
	border: 20px solid #fff;
	box-shadow: 1px 1px 3px rgba(0,0,0,.1);
	margin: 0 auto;
	text-align: center;
	position: relative;
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}

section > div{
	height: 400px;
	width: 150px;
	float: left;
	position: relative;
}

section > div > label {
	display: block;
	width: 150px;
	height: 30px;
	margin-top: 350px;
	font-style: italic;
	font-size: 20px;
	color: #fff;
	line-height: 30px;
	position: relative;
	z-index: 1000;
}

section > div > label::before {
	content: "";
	display: block;
	height: 34px;
	width: 34px;
	border-radius: 50%;
	background-color: rgba(130,195,217,0.9);
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -17px;
	margin-left: -17px;
	z-index: -1;
	box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
}

section > div:not(:nth-of-type(4)) > label::after{
	content: "";
	display: block;
	width: 1px;
	height: 400px;
	background-color: #fff;
	position: absolute;
	right: 0px;
	bottom: -20px;
}

section > div > input {
	display: none;
}

就是切换图片的那个section ，我个人比较喜欢清晰点的结构，但是写到图片转换这块就没思路了。。

xurdy 2017-03-15

源自：CSS3图片切换特效 3-6 图片定位

收起

1回答

怎么都被占用了呢 2017-03-15 16:25:17

可以实现图片转换的效果呀，section下的4个大的div跟视频中讲师的布局是一样的，每个大div中的4个小div相当于视频里每个div中的4个span标签。可以使用绝对定位让4个小div重叠在一起，也可以设置3个隐藏，一个显示。每个小div中的图片定位参考视频就行了，做法是一样的。

千万不要着急，一着急思路就不清晰了。多看几遍视频，多写两遍就会了。

收起回答

提问者 xurdy #1

但是问题是视屏中 4个div 是嵌套在 .cr-bgimg 中的，而.cr-bgimg 是写在lable和input之后，且是同属于section的子元素，所以通过 lable:checked + .cr-bgimg（通用兄弟选择器）给 .cr-bgimg添加背景图片，但是我这个html结构 lable、input 全部嵌套在div中，所以我不知道如何给外层div添加背景。。

2017-03-15 19:41:03
提问者 xurdy #2

上面的+ 写错了应该是 ~，+ 是相邻兄弟选择器

2017-03-15 20:16:31
提问者 xurdy #3

视频我是可以看懂的，但是觉得CSS处理逻辑略微复杂、html结构够清晰一目了然，不知道有没有更好的的方法实现同样的效果。

2017-03-15 22:45:32