首页自适应flash型首页

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

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

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

首页自适应flash型首页

相关推荐