勤现在-乐将来
用 户:
密 码:
记住我
今天群里的一个朋友看到这个焦点图,看了下,还蛮漂亮的,于是提出来分享下。这个焦点图是基于jQuery的。所以很合适放到WordPress里来。而且它的背景图是放在一张图上的。很大,要用的话得把里面焦点图部分单独切出来。看下效果图。
<!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 http-equiv="Content-Language" content="zh-CN"/> <title>篱笆网</title> <style> body { color:#000; font-size:12px; font-weight:400; font-family:Arial,Verdana,sans-serif; margin:0 auto; padding: 0; text-align: center; background:#fff; } ul, li { margin: 0;padding: 0; border: 0;} a img { border: none; } .slide-player{margin-top:120px;width:500px;height:226px; position:relative;} .slide-player ul{ position:absolute;left:0; bottom:0; height:26px;width:500px;overflow:hidden;zoom:1; background:url(http://liba.com/index/img/index_bg.gif) right -477px;} .slide-player li {float:left;height:26px; cursor:pointer; color:#636363; width:100px;line-height:26px; text-align:center;} .slide-player li.selected{ color:#FF6500;font-weight:bolder; background:url(images/index_bg.gif) right -444px;} </style> <script type='text/javascript' src="http://liba.com/index/js/jquery.js"></script> <script type="text/javascript"> function showTab(id,n){ $(id+" .t-t li").each(function(i){ if(i==n){ $(this).addClass("selected"); }else{ $(this).removeClass("selected"); } }); $(id+" .t-c").each(function(i){ if(i==n){ $(this).show(); }else{ $(this).hide(); } }); }//End ShowTab $(document).ready(function(){ $(".slide-player .t-t li").each(function(i){ $(this).mouseover( function(){ showTab(".slide-player",i); } ); }); var slideNum=0; function SlidePlayerClick(){ if(slideNum>$('.slide-player .t-t li').size()-1){ slideNum=0; } $('.slide-player .t-t li').each(function(i){ if ( i == slideNum ){ $(this).trigger('mouseover'); } }); slideNum++; } setInterval(SlidePlayerClick,3000); setInterval('AutoScroll("#homeKeywords")',4000) }); </script> </head> <body> <div class="slide-player"> <ul class="t-t"> <li class="selected">建材抢购</li> <li>我为装修狂</li> <li>中银篱笆卡</li> <li>结婚抢鲜会</li> <li>邮轮盛典</li> </ul> <div class="t-c"> <a href="/countpv.php?serid=84&block=liba_sda_1&jumpurl=http://subject.liba.com/topic/2009_buying_4/" target="_blank"><img src="http://www.liba.com/files/index/2009/03/27/15850.jpg" width="500" height="200"/></a> </div> <div class="t-c" style="display:none;"><a href="/countpv.php?serid=84&block=liba_sda_1&jumpurl=http://subject.liba.com/deco/xianchang090320/" target="_blank"><img src="http://www.liba.com/files/index/2009/03/20/15691.jpg" width="500" height="200"/></a> </div> <div class="t-c" style="display:none;"><a href="/countpv.php?serid=84&block=liba_sda_1&jumpurl=http://card.sh.liba.com/boclb/member.html?source=A1" target="_blank"><img src="http://www.liba.com/files/index/2009/02/25/15222.gif" width="500" height="200"/></a> </div> <div class="t-c" style="display:none;"><a href="/countpv.php?serid=84&block=liba_sda_1&jumpurl=http://auction.liba.com/marry_sh0903/" target="_blank"><img src="http://www.liba.com/files/index/2009/03/09/15434.jpg" width="500" height="200"/></a> </div> <div class="t-c" style="display:none;"><a href="/countpv.php?serid=84&block=liba_sda_1&jumpurl=http://marry.sh.liba.com/activity/youlun/" target="_blank"><img src="http://www.liba.com/files/index/2009/03/09/15435.jpg" width="500" height="200"/></a> </div> </div><!--End Tabs By Await 2009-03-30 14:50--> </body> </html>
提示:你可以先修改部分代码再运行。
喜欢你的blog了
电子邮件地址不会被公开。 必填项已用 * 标注
姓名 *
电子邮件 *
站点
评论
您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
喜欢你的blog了