<!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>
<title>kakaFocus</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function focusBox(o){
if(!o) return;
var w=630, $o=$('#'+o),i=0,l=0;arr= [],t= null,
$infoLi = $o.find('.banner_info li'), len= $infoLi.length*2,
$ul=$o.find('.banner_pic>ul');
$ul.append($ul.html()).css({'width':len*w, 'left': -len*w/2});
$infoLi.eq(0).addClass('current');
//add banner_pages element
arr.push('<div class="banner_pages"><ul>');
$infoLi.each(function(i){
if(i==0){
arr.push('<li class="current"><span>'+ (i+1) +'</span></li>');
}else{
arr.push('<li><span>'+ (i+1) +'</span></li>');
}
});
arr.push('</ul></div>');
$o.append(arr.join(''));
var $pagesLi = $o.find('.banner_pages li');
//mouse
$pagesLi.children('span').click(function(){
var p = $pagesLi.index($o.find('.banner_pages li.current'));
i = $pagesLi.children('span').index($(this));
if(i==p) return;
l = parseInt($ul.css('left')) + w*(p-i);
addCurrent(i,l);
return false;
})
$o.children('a.btn_prev').click(function(){
i = $pagesLi.index($o.find('.banner_pages li.current'));
(i==0)? i=(len/2-1):i--;
l = parseInt($ul.css('left')) + w;
addCurrent(i,l);
return false;
})
$o.children('a.btn_next').click(function(){
i = ($pagesLi.index($o.find('.banner_pages li.current'))+1)%(len/2);
l = parseInt($ul.css('left')) - w;
addCurrent(i,l);
return false;
})
//auto focus
t = setInterval(init,8000);
$o.hover(function(){
clearInterval(t);
}, function(){
t = setInterval(init,8000);
});
function init(){
$o.children('a.btn_next').trigger('click');
}
//add focus
function addCurrent(i,l){
if($ul.is(':animated')) return;
$ul.animate({'left':l},500,function(){
$o.children('.banner_count').text(i+1);
$infoLi.not($infoLi.eq(i).addClass('current')).removeClass('current');
$pagesLi.not($pagesLi.eq(i).addClass('current')).removeClass('current');
if(l== (1-len)*w){
$ul.css({'left': (1-len/2)*w});
}else if(l== 0){
$ul.css({'left': -len*w/2});
}
});
}
}
$(function(){
focusBox('kakaFocus');
})
</script>
</head>
<body>
<div class="banner" id="kakaFocus">
<a class="btn_prev" title="上一个" href="#">Previous</a>
<a class="btn_next" title="下一个" href="#">Next</a>
<div class="banner_pic">
<ul>
<li><a href="#"><img width="630" height="210" src="images/pic_01.jpg" alt="" /></a></li>
<li><a href="#"><img width="630" height="210" src="images/pic_02.jpg" alt="" /></a></li>
<li><a href="#"><img width="630" height="210" src="images/pic_03.jpg" alt="" /></a></li>
<li><a href="#"><img width="630" height="210" src="images/pic_04.jpg" alt="" /></a></li>
<li><a href="#"><img width="630" height="210" src="images/pic_05.jpg" alt="" /></a></li>
</ul>
</div>
<div class="banner_info">
<ul>
<li>
<h4><a href="#">快乐的旅程，参观武汉可口可乐饮料有限公司</a></h4>
<div class="ext">
时光: 2010-02-10 <span class="pipe">|</span>
分类: <a href="#">美图</a> <span class="pipe">|</span>
标签: <a href="#">乐高</a>, <a href="#">乐高</a>
</div>
</li>
<li>
<h4><a href="#">巧口英语“力推”Club活动——？</a></h4>
<div class="ext">
时光: 2010-03-16 <span class="pipe">|</span>
分类: <a href="#">高烧</a> <span class="pipe">|</span>
标签: <a href="#">LEGO</a>, <a href="#">乐乐</a>
</div>
</li>
<li>
<h4><a href="#">想学音乐应从什么时候开始？</a></h4>
<div class="ext">
时光: 2010-03-26 <span class="pipe">|</span>
分类: <a href="#">产品</a>, <a href="#">默认</a> <span class="pipe">|</span>
标签: <a href="#">春运</a>, <a href="#">乐</a>, <a href="#">凑和</a>
</div>
</li>
<li>
<h4><a href="#">关于草原情全国小记者选拔赛通知。</a></h4>
<div class="ext">
时光: 2010-03-26 <span class="pipe">|</span>
分类: <a href="#">产品</a>, <a href="#">左右</a> <span class="pipe">|</span>
标签: <a href="#">春运</a>, <a href="#">乐</a>, <a href="#">凑和</a>
</div>
</li>
<li>
<h4><a href="#">中国小记者新闻写作大赛？</a></h4>
<div class="ext">
时光: 2010-04-26 <span class="pipe">|</span>
分类: <a href="#">年代</a>, <a href="#">春节</a> <span class="pipe">|</span>
标签: <a href="#">兄弟</a>, <a href="#">酒</a>, <a href="#">最后</a>
</div>
</li>
</ul>
</div>
<div class="banner_count">1</div>
</div><!--banner end-->
<div style="height:20px; background:#EEE;"></div>
</body>
</html>
