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

Await — Mon, 30 Mar 2009 14:33:21 +0000

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

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

2010-10-12 -- 分享Flight主题中的焦点图（基于JQ） (22)
关于这个焦点图没啥说的了，网上太多了。但自己一直没找到个合适的。现在的这个是Dreamy主题中的升级版，虽然看起来一模一样。其实做了很多扩展，优化了结构和JS部分。可以选择切换方式（左右滚动，上下滚动...
2008-11-06 -- 北京奥运官方网站幻灯切换效果JS版 (3)
我想对于这个焦点图片轮换大家都不陌生吧.不过原来的是FLASH版的.今天偶然看到一个JS版的.效果很酷.在这和大家分享下. 佐佐制造byzuo.cn---焦点图片第三季 ...

您可能也喜欢：
分享Flight主题中的焦点图（基于JQ）	用jQuery处理文本框的焦点[focus]状态	关于Tab(选项卡)的一些实现方式	Wondershare Flash SlideShow Builder v4.6.0 绿色版	jQuery实现背景图渐变切换
无觅

等待-放飞梦想 » focus

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

相关文章