HTML5全屏大图幻灯片切换特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5全屏大图幻灯片切换特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5全屏大图幻灯片切换特效</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/flexslider.css" />
<link rel="stylesheet" href="css/demo.css" />
<style type="text/css">		

	/* general style */
	.preview {
		width: 360px;
		height:90px;
		position: absolute;
		top:0;
		left:-90px;
		z-index:100;
		-webkit-transition:  all 0.3s ease-out; 
		-moz-transition:  all 0.3s ease-out; 
		transition:  all 0.3s ease-out; 	
		opacity:0;
	}
	
	.preview img {
		position: absolute;
		left:90px;
		top:0;
		width: 90px;
	}
	
	.preview .alt {
		position: absolute;
		left:180px;
		top:0;
		background: #fff;
		width: 180px;
		height:90px;
		color:#000;
		text-indent:0;
		text-transform: uppercase;
		text-align:center;
		font-size:16px;
		line-height:90px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
	}
	
	
	/* next button */			
	.flex-next .preview {
		right:-50px;
		left:auto;	
	}
	
	.flex-next .preview img {
		position: absolute;
		left:180px;
		top:0;
		width: 90px;
	}
	
	.flex-next .preview .alt {
		left:0;
	}
	
	
	/* hover style */		
	.flex-prev:hover .preview {
		left:0;
		opacity:1;
	}
	
	.flex-next:hover .preview {
		right:0;
		opacity:1;
	}	
	
</style>
</head>
<body>

<div id="hero">
	
	<div class="flexslider">
	  <ul class="slides">
		<li>
				<img src="img/full/5.jpg" alt="icy Mountain" data-thumbnail="img/thumbnail/5.jpg" />	
			</li>		
			<li>
				<img src="img/full/3.jpg" alt="Stoney Creek" data-thumbnail="img/thumbnail/3.jpg" />	
			</li>
		<li>
				<img src="img/full/2.jpg" alt="Narrow Road" data-thumbnail="img/thumbnail/2.jpg" />	
			</li>						 		
		<li>
				<img src="img/full/4.jpg" alt="Wood Pattern" data-thumbnail="img/thumbnail/4.jpg" />	
			</li>
		</ul>
	</div>		
</div>	
<section>
	<div class="container">
		
	</div>
</section>
<script src="js/jquery.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/demo.js"></script>
</body>
</html>

JS代码(demo.js):

$(function (){
	$('#hero .flexslider').flexslider({
	slideshow:false,slideshowSpeed:5000,pauseOnHover:true,start:renderPreview,//render preview on startbefore:renderPreview //render preview before moving to the next slide}
);
	function renderPreview(slider){
	var sl = $(slider);
	var prevWrapper = sl.find('.flex-prev');
	var nextWrapper = sl.find('.flex-next');
	//calculate the prev and curr slide based on current slide var curr = slider.animatingTo;
	var prev = (curr == 0) ? slider.count - 1:curr - 1;
	var next = (curr == slider.count - 1) ? 0:curr + 1;
	//add prev and next slide details into the directional nav prevWrapper.find('.preview,.arrow').remove();
	nextWrapper.find('.preview,.arrow').remove();
	prevWrapper.append(grabContent(sl.find('li:eq(' + prev + ') img')));
	nextWrapper.append(grabContent(sl.find('li:eq(' + next + ') img')));
}
// grab the data and render in HTMLfunction grabContent(img){
	var tn = img.data('thumbnail');
	var alt = img.prop('alt');
	var html = '';
	//you can edit this markup to your own needs,but make sure you style it up accordinglyhtml = '<div class="arrow"></div><div class="preview"><img src="' + tn + '" alt="" /><div class="alt">' + alt + '</div></div>';
	return html;
}
}
);

CSS代码(demo.css):

.container{width:100%;margin:0 auto;}
#info{position:absolute;top:50px;left:50%;width:600px;margin-left:-300px;margin-top:-150px;font-family:'Roboto',Helvetica,Arial;z-index:1000;color:#fff;font-weight:300;}
#info h1{font-size:40px;text-transform:uppercase;text-align:center;}
#info p.styles{margin:0 0 20px 0;padding:0;text-align:center;width:100%;}
#info p.styles a{display:inline-block;padding:5px 15px;background:rgba(0,0,0,0.5);text-decoration:none;margin:0 10px;}
#info p.styles a.active,#info p.styles a:hover{background:#fff;color:#333;}
#info p{width:80%;text-align:center;margin:0 auto;line-height:24px;}
#info a{color:#fafafa;}
#info p.social{width:220px;margin:0 auto;margin-top:33px;}
/* override flexslider default style */
.flexslider{border:0;-webkit-border-radius:0;-moz-border-radius:0;-o-border-radius:0;border-radius:0;margin:20px;overflow:hidden;-webkit-box-shadow:none;-moz-box-shadow:none;-o-box-shadow:none;box-shadow:none;}
.flex-control-nav{width:100%;position:absolute;bottom:20px;text-align:center;z-index:900;}
.flex-control-paging li a{background:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;-o-box-shadow:none;box-shadow:none;border:2px solid #fff;}
.flex-control-paging li a:hover,.flex-control-paging li a.flex-active{background-color:#fff;}
.flex-direction-nav{height:90px;width:100%;position:absolute;top:50%;left:0;margin:-50px 0 0;z-index:100;}
.flex-direction-nav li{overflow:visible;}
.flex-direction-nav a{overflow:visible;width:90px;height:90px;margin:0;opacity:1;top:0;color:rgba(0,0,0,0.8);text-indent:-9999em;text-shadow:none;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;transition:all 0.3s ease-out;background-color:rgba(0,0,0,0.5);-webkit-box-shadow:none;-moz-box-shadow:none;-o-box-shadow:none;box-shadow:none;}
.flex-direction-nav .arrow{position:absolute;top:0;left:0;width:90px;height:90px;background:transparent url('../img/nav.png') no-repeat 5px 5px;z-index:200;}
.flex-direction-nav a.flex-next .arrow{background-position:-75px 5px;}
.flex-direction-nav .flex-prev{left:0px;}
.flex-direction-nav .flex-next{right:0px;text-align:left;}
.flexslider:hover .flex-prev{left:0;opacity:1}
.flexslider:hover .flex-next{right:0;opacity:1}
.flexslider:hover .flex-prev:hover .arrow{left:0;background-position:5px -95px;background-color:#fff;}
.flexslider:hover .flex-next:hover .arrow{right:0;background-position:-75px -95px;opacity:1;background-color:#fff;}
.flexslider:hover .flex-prev:hover,.flexslider:hover .flex-next:hover{background-color:#fff;opacity:1;}
.flexslider{width:800px;margin-left:auto;margin-right:auto;margin-top:100px;}
body{background-color:#000000}

附件:下载该文件资源,减少时间成本(增值服务)