JS+CSS3实现带预览图幻灯片效果-慕课网技术问答-课程问答

慕圣9983511 2018-02-02

缩略图的位置为什么在层外面啊?: 我通过调整定位，令缩略图位置在上方了，但是我的预览图和层Ctrl高度一样了，显得很扁平，怎么办呢？; 3回答·1460浏览

桂圆 2017-09-17

4分处slide的css为什么用relitive样式啊: 他的子元素有个绝对定位，所以他这个父亲要有相对定位，这样的话，子元素就相对他了，而不是相对body了。; 1回答·1600浏览

cym01494 2017-08-15

运行结果不对，求解，中间红线没了: 少了<div class="slider"></div>; 1回答·1415浏览

qq_请叫我曼哥好么_0 2017-04-14

为什么我的写好后成这样啊: div错了 className+=' main-i_active'字符串第一个是空格; 1回答·1168浏览

慕神4593838 2017-03-23

如何去掉文字的白底: 已采纳信者得救的回答; 文字本来就没有白底的啊你应该是设置了背景颜色了; 1回答·2100浏览

请叫我橙子蛋 2017-03-09

效果出来不一样，那个缩略图没有在预期的位置0.0: 看到这里解决我的问题了我也是跟着代码敲最后图片加了position 直接定位爆炸我想问下不给a 也就是ctrl-i设置定位那么他的最近的父元素不是ctrl么怎么定位会定到上面去嘞 ctrl也有position属性啊虽然是absolute; 3回答·1134浏览

慕勒0077045 2016-12-18

我用hb来做怎么显示结果不一样，是不是哪里错了

<body>

<div class="slider"></div> --------------这个div放到最后

... ...

</div> <-------- 放到这里

</body>

1回答·1032浏览

349811828汀蓝 2016-12-12

标题无法显示: 已解决; 1回答·1070浏览

不良人4055026 2016-11-12

<img src="images/{{index}}.jpg" />: 这是构建模板用的，{{index}}这个字符串会被之后循环添加图片替换成相应的图片文件名; 6回答·3009浏览

晴天93 2016-11-06

没剧中: 字体本来就不是在中间啊; 1回答·698浏览

慕粉3483057 2016-09-27

css类选择器通过多层类的选择: 已采纳 qq_骑着猪散步_0 的回答; 用类这种选择器可以重复使用同一样式，简化代码，如果显不出所设置的样式，很有可能您的类名写错了; 2回答·2093浏览

qq_谧然纷飞_03830694 2016-08-23

.slider .ctrl 当中的bottom：-13px是什么意思，为什么前面加“ - ”符号呢？

这是为了将.ctrl放在.slider的下边13px处，请看图，应该很清楚的了

3回答·1275浏览

雨中美景 2016-07-02

关于img标签: 还要检查你的a是不是也有display width height position属性· 要不a就是个没有宽高的标签· 图片也会显示不出来·; 2回答·541浏览

殇苡迦箬 2016-06-12

父子等级关系: 定位的原因; 1回答·961浏览

1551932371 2016-03-30

求源码分享下: 5回答·1413浏览

陈淑群 2015-09-30

求源码，有吗

已采纳徐佳骏的回答

<!DOCTYPE html>
<html >
	<head>
	<title>Preview Slideshow</title>
	<style type="text/css">
	*{padding:0;margin:0;}
	body{
		padding:50px 0;
		background-color:#FFF;
		font-size:14px;
		font-family:'Avenir Next'; 
		-webkit-font-smoothing:antialiased;
}	
	.slider .main,
	.slider .main .main-i,
	.slider{
		width:100%;
		height:400px;
		position:relative;
		
	}
	.slider .main{
		overflow: hidden;
	}
	.slider .main .main-i{}
	.slider .main .main-i img{
		
		position:absolute;
		left:0;
		top:0;
		z-index:1;
	}
	.slider .main .main-i .caption{
		position:absolute;
		right:50%;
		top:30%;
		z-index:9;
	}
	.slider .main .main-i .caption h2{
		font-size:40px;
		line-height:50px;
		color:#B5B5B5;
		text-align: right;

	}
	.slider .main .main-i .caption h3{
		font-size:70px;
		line-height: 70px;
		color:#000000;
		text-align:right;
		font-family:'Open Sans Condensed';
	}
	.slider .ctrl{
		width:100%;
		height:13px;
		line-height:13px;
		text-align:center;
		position:absolute;
		left:0;
		bottom:-13px;
		background-color:red;
	}
	.slider .ctrl .ctrl-i{
		display:inline-block;
		width:150px;
		height:13px;
		background-color:#666;
		box-shadow: 0 1px 1px rgba(0,0,0,.3);
		position:relative;
	}
	.slider .ctrl .ctrl-i img{
		width:  100%;
		position: absolute;
		left: 0;
		bottom: 50px;
		z-index: 1;
	}
	</style>
	</head>

<body>
	<div class="slider">
			<div class="main">
				<div class="main-i">
					<div class="caption">
						<h2>h2 caption</h2>
						<h3>h3 caption</h3>
					</div>
					<img src="image/1.jpg" /> 
				</div>
			</div>	
	<div class="ctrl">
		<a class="ctrl-i" href=""><img src="image/1.jpg" /> </a>
	</div>
	</div>
</body>
</html>

4回答·1112浏览