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