广告自动播放（转）

青春天空

<!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=utf-8" /><meta name="keywords" content="飞科,工作室,飞科工作室,css,web,web标准,网页制作,平面设计,布局," /><meta name="description" content="欢迎您来到飞科工作室，本站致力于web标准化，研究css，注重代码书写中的规范；分享前台设计技巧" /><title>青春天空</title><link rel="stylesheet" href="style/basic.css" type="text/css" /><script type="text/javascript" src="http://www.webfeike.net/js/jquery132min.js"></script><script type="text/javascript">$(function(){ var objText = ".display ul.text li"; var objContent = ".display ul.img li"; $("objText:first").addClass("on"); $("objContent:not(:first)").addClass("none"); autoroll(); hookThumb(); var i=-1; var offset = 4000; var timer = null; function autoroll(){ n = $(objText).length-1; i++; if(i > n){ i = 0; } slide(i); timer = window.setTimeout(autoroll, offset); } function slide(i){ $(objText).eq(i).addClass("on").siblings().removeClass("on"); $(objContent).eq(i).fadeIn(1000).siblings(objContent).hide(); } function hookThumb(){ $(objText).hover( function () { if (timer) { clearTimeout(timer); i = $(this).prevAll().length; slide(i); } }, function () { timer = window.setTimeout(autoroll, offset); this.blur(); return false; } ); }});</script><style type="text/css">/*--- basic ---*/* { margin: 0; padding: 0; border: 0;}body { color: #747474; font: 12px/1.6em 宋体 sans-serif; font-size: 12px; /*IE8 BUG*/ text-align: center;}li { list-style: none; list-style-type: none;}/*--- basic end ---*/.display { position:relative; overflow:hidden; width: 668px; height: 238px; border: solid 1px #CCC;}.display ul.img { position:absolute; top: 2px; left: 2px; width: 460px; height: 240px;}.display ul.img li { display: block; width: 458px; height: 236px; overflow:hidden;}.display ul.text { position: absolute; width: 200px; right: 2px; margin-top: 2px;}.display ul.text li { display: block; width: 200px; height: 45px; line-height: 45px; margin-top: 2px; background-color: #F2F2F2; font-size: 14px; color: #747474;}.display ul.text li.on { width: 197px; color: #fff; background: #75B331; font-weight: bold; border-left: solid 3px #619D19;}.display ul.text li.on a { color:#fff;}</style></head><body><div id="box"> <div class="display"> <ul class="img"> <li><a href="#"><img src="http://www.webfeike.net/images/photo/display_04.jpg"/></a></li> <li><a href="#"><img src="http://www.webfeike.net/images/photo/display_01.jpg"/></a></li> <li><a href="#"><img src="http://www.webfeike.net/images/photo/display_03.jpg"/></a></li> <li><a href="#"><img src="http://www.webfeike.net/images/photo/display_01.jpg"/></a></li> <li><a href="#"><img src="http://www.webfeike.net/images/photo/display_03.jpg"/></a></li> </ul> <ul class="text"> <li><a href="#">某某校园走廊</a></li> <li><a href="#">周年晚会，热歌热舞也热闹</a></li> <li><a href="#">周年晚会，热歌热舞也热闹</a></li> <li><a href="#">周年晚会，热歌热舞也热闹</a></li> <li><a href="#">周年晚会，热歌热舞也热闹</a></li> </ul> </div> </body></html>

posted on 2011-04-12 17:17 netdelphi 阅读(302) 评论(0) 收藏举报

刷新页面返回顶部

netdelphi

广告自动播放（转）

导航

公告