3屏jQuery通栏banner轮播滚动广告js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 3屏jQuery通栏banner轮播滚动广告js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码" />
<link href="style/js-leaf-hero.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/js-leaf-hero.js"></script>
<!--[if IE 6]>
<script src="js/belatedpng.min.js"></script>
<script>belatedPNG.fix('.pngfix');</script>
<![endif]-->
<title>{title}</title>
</head>
<body>

<div id="preview-content-head">
    <div id="preview-slider">
        <div id="preview-slide-1"><a href="#" target="_blank"><img src='images/01.jpg' alt="" width='930' height='300' /></a></div>
        <div id="preview-slide-2" class="preview-hide"><a href="#" target="_blank"><img src='images/02.jpg' alt="" width='930' height='300'  /></a></div>
        <div id="preview-slide-3" class="preview-hide"><a href="#" target="_blank"><img src='images/03.jpg' alt="" width='930' height='300' /></a></div>
        <div id="preview-slider-line">
            <ul id="preview-slider-holder">
                <li class="preview-first"><div class="preview-slider-thumbnail"><a href="#" target="_blank"><img src='images/01.png' alt="" width='66' height='36' id='preview-thumbnail-im1' /></a></div><span><a href="#" target="_blank">感谢2011</a></span></li>
                <li class="preview-second"><div class="preview-slider-thumbnail"><a href="#" target="_blank"><img src='images/02.png' alt="" width='66' height='36' id='preview-thumbnail-im2' /></a></div><span><a href="#" target="_blank">智能移动网站管理系统</a></span></li>
                <li class="preview-third"><div class="preview-slider-thumbnail"><a href="#" target="_blank"><img src='images/03.png' alt="" width='66' height='36' id='preview-thumbnail-im3' /></a></div><span><a href="#" target="_blank">智能网站管理系统</a></span></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

JS代码(js-leaf-hero.js):

(function($){
	$(document).ready(function(){
	var ready = true;
	$('ul#preview-slider-holder > li').mouseover(function (){
	var _this = this;
	var position = 0;
	if($(this).hasClass('preview-first')){
	position = 0;
}
else if($(this).hasClass('preview-second')){
	position = 1;
}
else if($(this).hasClass('preview-third')){
	position = 2;
}
if(!ready){
	$("#preview-slider > div:not(':last'):not(':eq(" + position + ")')").each(function(){
	if($(this).is(':animated')){
	$(this).stop(true,true);
}
}
);
}
ready = false;
	$("#preview-slider > div:not(':last'):not(':eq(" + position + ")')").hide();
	$('img',this).animate({
	"top":"-15px"}
,200);
	$('#preview-slide-' + (position + 1)).fadeIn(600,function(){
	ready = true;
}
);
	$('img[id^="preview-thumbnail-im"]:not([id="preview-thumbnail-im' + (position+1) + '"])').stop(true,false).animate({
	'top':'0px'}
,200);
}
);
}
);
}
)(jQuery);

CSS代码(js-leaf-hero.css):

img{border:0}
#preview-slider{position:relative;}
#preview-content-head #preview-slider{width:930px;height:300px;}
#preview-leadspace #preview-slider{width:710px;height:200px;}
#preview-slider-line{left:0px;position:absolute;bottom:0;width:100%;background-image:url('../images/bg.png');background-repeat:repeat;}
#preview-content-head #preview-slider-line{height:50px;}
#preview-leadspace #preview-slider-line{height:40px;}
#preview-slider-holder{list-style-type:none;padding:0px;margin:5px;width:100%;}
#preview-slider-holder li{position:relative;float:left;display:inline-block;width:32%;vertical-align:top;zoom:1;/*IE hack to trigger hasLayout*/
*display:inline;/*IE hack to achieve inline-block behavior*/
}
#preview-slider.preview-alternate #preview-slider-holder li{width:49%;}
#preview-content-head #preview-slider-holder li{min-height:37px;margin:5px 0 0 7px;clear:none !important;}
#preview-leadspace #preview-slider-holder li{min-height:30px;margin-top:5px;margin-left:6px;}
#preview-slider-holder li a{text-decoration:none;color:#FFFFFF;border:0 none;}
#preview-slider-holder li span{position:absolute;width:72%;top:0px;margin-left:4px;overflow:hidden;color:#FFFFFF;font-family:'Arial';}
#preview-content-head #preview-slider-holder li span{left:59px;font-size:12px;}
#preview-leadspace #preview-slider-holder li span{left:48px;font-size:12px;}
#preview-slider-thumbnail{position:relative;float:left;}
#preview-content-head #preview-slider-thumbnail{width:54px;}
#preview-leadspace #preview-slider-thumbnail{width:45px;}
#preview-slider-thumbnail img{position:absolute;border:0 none;}
.preview-hide{display:none;}
#preview-thumbnail-im3,#preview-thumbnail-im2,#preview-thumbnail-im1{position:absolute;}

附件:下载该文件资源,减少时间成本(增值服务)