等待-放飞梦想

勤现在-乐将来

从篱笆网提取的一个焦点图切换

Await / 资源分享 / 2009/03/30 10:33 / 热度(2,846)

今天群里的一个朋友看到这个焦点图，看了下，还蛮漂亮的，于是提出来分享下。这个焦点图是基于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> </body> </html>

提示：你可以先修改部分代码再运行。

focus tab切换焦点图

评论(2)

佚名
2012/04/08

很喜欢你的设计，能给我分享一下你现在使用的这个主题么。

回复
瓷库中国
2009/05/08

喜欢你的blog了

回复

等待-放飞梦想

从篱笆网提取的一个焦点图切换

评论(2)

发表评论 取消回复

发表评论取消回复