为了账号安全,请及时绑定邮箱和手机立即绑定

正在回答

3 回答

<!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>


1 回复 有任何疑惑可以回复我~
#1

陈淑群 提问者

非常感谢!
2016-04-01 回复 有任何疑惑可以回复我~

想要源码的,关注github https://github.com/cllgeek/Preview-Slideshow  多多请教

0 回复 有任何疑惑可以回复我~

在sublim上编译出错。。。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS+CSS3实现带预览图幻灯片效果
  • 参与学习       53759    人
  • 解答问题       265    个

同样的幻灯片,不一样的切换,学会实现思路,操作很简单

进入课程

求源码,有吗

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信