                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS+CSS3實現帶預覽圖幻燈片效果

求源碼，有嗎

誰有源碼的？求發

陳淑群

2015-09-30

源自：JS+CSS3實現帶預覽圖幻燈片效果 2-1

關注問題我要回答

1052

操作

收起

3 回答

徐佳駿回答被采納 +3 積分
2015-10-14

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