【Sample】Full screen display with an image(The image change is jQuery)

  • listen
  • overlook
  • voice
  • effort
  •  
  • listen
  • overlook
  • voice
  • effort
  •  
  • listen
  • overlook
  • voice
  • effort
  •  
  • listen
  • overlook
  • voice
  • effort
  •  
  • listen
  • overlook
  • voice
  • effort
  •  
  • listen
  • overlook
  • voice
  • effort
  •  
  • listen
  • overlook
  • voice
  • effort
  •  
  • listen
  • overlook
  • voice
  • effort
  •  
  • listen
  • overlook
  • voice
  • effort
  •  
  • listen
  • overlook
  • voice
  • effort
  •  
HTML

 Read jQuery 1.x snippet in <head> from Google Hosted Libraries.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<ul id="fullscreen">
<img src="bg1.png" alt="">
<img src="bg2.png" alt="">
</ul>
CSS

body {
	color: #888;
}
#fullscreen {
	width: 100%;
	height: auto;
	min-width: 960px;
	min-height: 100%;
	z-index: -1;
	position: fixed;
}
#fullscreen img {
	width: 100%;
	height: auto;
	min-width: 960px;
	min-height: 100%;
	position: absolute;
}
.full-screen {
	margin: 0 auto;
	padding: 10px;
}
h2 {
	width: 208px;
	margin: 0 auto;
	padding: 10px;
}
h3 {
	text-align: center;
	font-size: 18px;
	font-weight: normal;
	padding: 25px 0 10px 10px;
}
.sample-demo {
	margin: 0 auto 40px auto;
	padding: 0;
}
article section p {
	padding: 10px 10px 200px 10px;
	text-align: center;
}
#copyright {
	margin: 10px 0 10px 0;
	text-align: center;
	font-size: 14px;
}
JavaScript

$(function(){
$('#fullscreen')
	.find('img:gt(0)').hide();
setInterval(function(){
$('#fullscreen :first-child')
	.fadeOut(1000)
	.next('img').fadeIn(2000)
	.end().appendTo('#fullscreen');},5000);
});