1、jsp核心代碼如下： <div id="bann" class="banner"> <div id="bann_bg" class="banner_bg"></div> <div id="bann_info" class="banner_info"></div> <div id="bann_li ...
1、jsp核心代碼如下：
<div id="bann" class="banner">
<div id="bann_bg" class="banner_bg"></div>
<div id="bann_info" class="banner_info"></div>
<div id="bann_list" class="banner_list">
<a href="#" target="_blank"><img src="1.jpg" alt="測試圖片1" /></a>
<a href="#" target="_blank"><img src="2.jpg" alt="測試圖片2" /></a>
<a href="#" target="_blank"><img src="3.jpg" alt="測試圖片3" /></a>
<a href="#" target="_blank"><img src="4.jpg" alt="測試圖片4" /></a>
</div>
</div>
2、css樣式核心代碼如下：
.banner {position:relative;float:left;margin-left:10px; width:450px; height:300px; overflow:hidden;}
.banner_list img{width:450px; height:300px;border:0}
.banner_bg {position:absolute; bottom:0;background-color:#000;height:28px;filter: Alpha(Opacity=50);opacity:0.5;z-index:1;cursor:pointer; width:400px; }
.banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:2;font-size:14px;cursor:pointer}
.banner_text {position:absolute;width:120px;z-index:3; right:3px; bottom:3px;}
.banner_ul {position:absolute;list-style-type:none;z-index:4;margin:0; padding:0; bottom:3px; right:3px;}
.banner_ul li { width:20px;line-height:20px;text-align:center;float:left;display:block;color:#ff6666;border:#e7f2fd 1px solid;background:#FFF;cursor:pointer}
.banner_ul .banner_on { background:#ff6666;color:#FFF}
.banner_list a{position:absolute;}
3、js核心代碼如下：
<script type="text/javascript">
var Speed = 1; //速度(毫秒)
var Space = 12; //每次移動(px)
var PageWidth =220; //翻頁寬度
var fill = 0; //整體移位
var MoveLock = false;
var MoveTimeObj;
var Comp = 0;
var AutoPlayObj = null;
$(document).ready(function(){
$("#bann").picture(5000);//5秒鐘切換圖片
});
jQuery.fn.extend({
picture:function(t){
return this.each(function(){
var id="#"+$(this).attr("id");
var n = -1, i_count,interval="<ul class='banner_ul'>";
i_count=$(id+"_list a").length;
for(var i=0;i<i_count;i++){
interval+="<li>"+(i+1)+"</li>";
}
$(id+"_info").after(interval+"<\/ul>");
$(id+" li").click(function(e) {
e.stopPropagation();
n=$(this).index();
$(id+"_info").html($(id+"_list a").eq(n).find("img").attr('alt'));
$(id+"_list a").filter(":visible").fadeOut(500).parent().children().eq(n).fadeIn(1000);
$(this).addClass("banner_on");
$(this).siblings().removeAttr("class");
});
interval = setInterval(showAuto, t);
$(this).hover(function(){clearInterval(interval)}, function(){interval = setInterval(showAuto, t)});
function showAuto(){
n = n >=(i_count-1) ? 0 : ++n;
$(id+" li").eq(n).click();
}
showAuto();
})
}
});
</script>
