jquery + jQuery.timer 实现轮转广告效果

来源：互联网发布：java fastjson maven 编辑：程序博客网时间：2024/05/01 01:07

代码写的很简单可以随便改动:

代码:

<!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>Round Images</title> <mce:script type="text/javascript" src="jquery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js"></mce:script> <mce:script type="text/javascript" src="jQuery.timers.js" mce_src="jQuery.timers.js"></mce:script> <mce:script type="text/javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> * { margin:0; padding:0; } img,img a { border:0; } body { height:900px; border:1px red solid; } .focus { width:400px; height:360px; position:relative; border:1px solid #D8D9DA; } /*标题*/ .newindex_flash_bt { width:100%; height:35px; position:absolute; bottom:0px; left:0px; background:#000; -moz-opacity:0.5; filter:alpha(opacity=50); z-index:1; } /*广告*/ .newindex_flash_btfont { width:90%; height:35px; position:absolute; bottom:0px; left:10px; z-index:2; color:#fff; padding:0px 30px 0px 50px; background:url(../images/foc.gif) no-repeat 0px 10px; line-height:33px; font-weight:bold; } .newindex_flash_btfont a { color:#fff; } .newindex_flash_btfont a:visited { color:#fff; } .newindex_flash_btfont span { margin-left:15px; } .pic img { width:400px; height:360px; } .container { border:0px solid #333; } .container img { border:0; } .bottom { position:absolute; bottom:0px; width:400px; filter: Alpha(Opacity=60); opacity: 1; background-color:#000; height:42px; line-height:30px; } .text { float:left; padding-left:5px; font-size:14px; color:#fff !important } .num { float:right; padding-right:5px; margin:5px; } .num li { float:left; list-style:none; color: #fff; text-align: center; line-height: 16px; width: 36px; height: 30px; font-family: Arial; font-size: 12px; cursor: pointer; margin:1px; border: 1px solid #707070; background-color: #000; } .num li.on { line-height: 18px; width: 38px; height: 30px; font-size: 14px; border: 0; font-weight: bold; } .pic { width:400px; height:360px; overflow:hidden; } .pic li { list-style:none; } </style> </head> <body> <div class="focus" style="left:200px;top:100px;"> <div class="container" id="idContainer2"> <ul class="pic" id="pic"> <li> <a href="http://www.g.cn" mce_href="http://www.g.cn" target="_blank"> <img src="images/1.jpg" mce_src="images/1.jpg" alt="图片1" width="400px" height="360px" title="图片1" /> </a> </li> <li> <a href="http://www.163.com" mce_href="http://www.163.com" target="_blank"> <img src="images/2.jpg" mce_src="images/2.jpg" alt="图片2" width="400px" height="360px" title="图片2" /> </a> </li> <li> <a href="http://www.sina.com" mce_href="http://www.sina.com" target="_blank"> <img src="images/3.jpg" mce_src="images/3.jpg" alt="图片3" width="400px" height="360px" title="图片3" /> </a> </li> <li> <a href="http://www.baidu.com" mce_href="http://www.baidu.com" target="_blank"> <img src="images/4.jpg" mce_src="images/4.jpg" alt="图片4" width="400px" height="360px" title="图片4" /> </a> </li> <li> <a href="http://www.51aspx.com" mce_href="http://www.51aspx.com" target="_blank"> <img src="images/5.jpg" mce_src="images/5.jpg" alt="图片5" width="400px" height="360px" title="图片5" /> </a> </li> <li> <a href="http://www.caidao8.com" mce_href="http://www.caidao8.com" target="_blank"> <img src="images/6.jpg" mce_src="images/6.jpg" alt="图片6" width="400px" height="360px" title="图片6" /> </a> </li> </ul> <div class="bottom"> <div class="text" id="text"></div> <ul class="num" id="num"> </ul> <div style="clear:both;" mce_style="clear:both;"></div> </div> </div> </div> </body> </html>

兼容 ff ie6 测试通过!