分类分类
2015-10-29 16:18作者：yezheng
这篇文章主要为大家介绍了首页自适应flash型首页效果代码,非常简单实用,需要的朋友可以参考下
具体代码如下：
<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>
相关