首页自适应flash型首页

2015/11/05 35869
<html>
<head>
<title>华欣达纺织首页第二版</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="basicrun.js"></script>
<script type="text/javascript" src="jquery.backstretch.min.js"></script>
<script type="text/javascript" src="jquery.bxSlider.min.js"></script>
<script type="text/javascript" src="preloader.js"></script>

</head>
<script type="text/javascript">
var slider;
var images = [
	"images/img_1.jpg",
	"images/img_2.jpg",
	"images/img_3.jpg"
];
var index = 0;
var transitionSpeed = 400;
var imageIntervals = 5000;
var startIntervals;
var intervalSetTime;
var contentOpen = false;

$(document).ready(function(){
	
	slider = $('#slider1').bxSlider({
		mode: 'fade',
		controls: false,
		pause: imageIntervals
	});
	
	for (i=0;i<=images.length - 1;i++){
		$('#thumb-container').append('<a href="javascript:goToContent('+ i +')"><img src="'+ images[i] +'?size=thumb" alt="Image '+ i +'" /></a>');
	}
	
	$(function() {
		
		$.preload(images, {
			init: function(loaded, total) {
				$("#indicator").html("<img src='images/load.gif' />");			
			},
			
			loaded_all: function(loaded, total) { 
				$('#indicator').fadeOut('slow', function() {
					$('#left-side').fadeIn('slow');
					$('#thumb-container').fadeIn('slow');
			 
					$.backstretch(images[index], {speed: transitionSpeed});
	
					startIntervals = function (){
						intervalSetTime = setInterval(function() {
						index = (index >= images.length - 1) ? 0 : index + 1;
						$.backstretch(images[index]);
						slider.goToNextSlide()
					}, imageIntervals)};
					
					startIntervals();					
				});
			}
		});
	});
});

function goToContent(slideNum){
	clearInterval(intervalSetTime);
	index = slideNum;
	$.backstretch(images[index]);
	slider.goToSlide(slideNum);
	if (contentOpen == false){
		startIntervals();
	}
};

//function showContent(){
	//$('.content-bg').fadeIn('slow');
	//clearInterval(intervalSetTime);
	//contentOpen = true;
//};
//function closeContent(){
	//$('.content-bg').fadeOut('slow');
	//startIntervals();
	//contentOpen = false;
//}; 
</script>
<style>
#indicator{width:48px; position:absolute; left:50%; margin:300px 0px 0px -24px;}

#thumb-container{position:absolute; bottom:0px; right:20px; background:url(images/content-bg.png); padding:15px 15px 0px 5px; margin-left:20px; display:none;}
#thumb-container img{float:left; width:75px; padding:0px 0px 15px 10px; opacity:.8; border:0px;}
#thumb-container img:hover{opacity:1;}
.bx-wrapper{float:left;}

</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (华欣达纺织首页第二版.psd) -->
<table id="__01" width="1440" height="760" border="0" cellpadding="0" cellspacing="0">
	
	<tr>
		<!-- <td>
			<script>
$(function(){
		$('.banner').bgStretcher({
			images: ['banner1.jpg','banner2.jpg','banner3.jpg'],
			links: ['/','/','/'],
			texts: ['1','2','3'],
			imageWidth: 1440, 
			imageHeight: 660, 
			slideDirection: 'E',
			slideShowSpeed: 3000,
			nextSlideDelay: 6000,
			transitionEffect: 'fade',
			sequenceMode: 'normal',
			buttonPrev: '#prev',
			buttonNext: '#next',
			pagination: '#nav',
			anchoring: 'center center',
			anchoringImg: 'center center'
		});
});
</script>
<div class="banner"></div>
			
			</td> -->
	<div id="indicator"></div>
    <div id="slider1">

    </div>
    <div id="thumb-container"></div>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
代码片段
