网页全屏自适应高清大图动态背景代码随机显示

2018年12月16日 0条评论

代码很简单，自适应屏幕。采用新浪图库接口，快速稳定。只需要在网页中加入以下代码即可实现高清全屏大图动态背景。。

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>动态背景代码</title>
<meta name="keywords" content="小洋，资源网，我爱搜，我爱搜罗，我爱网，吾爱，52搜罗，爱q资源网，小k娱乐网，爱搜索，小新娱乐网，小刀娱乐网，吾爱分享,吾爱共享">
</head>
<body >
  
<script src="https://www.wuioo.cn/00/jquery-1.8.2.min.js"></script>
<script src="https://www.wuioo.cn/00/supersized.3.2.7.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$.supersized({
// Functionality
slide_interval : 5000, // Length between transitions
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 1000, // Speed of transition
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : [ // Slideshow Images
{image : 'https://api.oxx0.com/gif.html?type=dm'},
{image : 'https://api.oxx0.com/img/'},
{image : 'https://api.oxx0.com/gif.html?type=fj'},
{image : 'https://api.oxx0.com/gif.html?type=yx'},
{image : 'https://api.oxx0.com/gif.html?type=ka'},
{image : 'https://api.oxx0.com/gif.html?type=k'},
{image : 'https://api.oxx0.com/gif.html?type=a'},
{image : 'https://api.oxx0.com/gif.html?type=aa'}
]
});
});</script>
	<style type="text/css">
	
.login-container{margin:10% auto 0 auto}
		.member {
    background: rgba(66, 65, 65, 0.49);
    z-index: 1;
    position: relative;
    padding: 5% 8%;
}.topBar {
			display:none;
}
.register-container{margin:0 auto 0 auto;    padding: 30px 0 120px 0;
    max-width: 380px;
    width: 96%;
    margin: 0 auto;
}
.register-tis {    line-height: 42px;
    margin: 15px auto 0px;
    padding: 0 15px;
    border: 1px solid #00BCD4;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0);
    color: #00BCD4;}
	img { border:none; }
	#supersized {  display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
		#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
			#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }	/*Speed*/
			#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }			/*Quality*/
		#supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
		#supersized a { width:100%; height:100%; display:block; }
			#supersized li.prevslide { z-index:-20; }
			#supersized li.activeslide { z-index:-10; }
				#supersized li.image-loading img{ visibility:hidden; }
			#supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }
#supersized img { max-width: none !important }
</style>
</body></html>