<!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" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; word-wrap: break-word; word-break: break-all; } ul, li { list-style: none; } img { border: none; } html { overflow: -moz-scrollbars-vertical; } /* 在Firefox下始终显示滚动条*/ /*右侧样式*/ .content_right { background: #eee; border: 1px solid #AAAAAA; width: 586px; float: left; } /*滚动广告样式*/ .content_right .ad { margin-bottom: 10px; width: 586px; height: 150px; overflow: hidden; position: relative; } .content_right .slider, .content_right .num { position: absolute; } .content_right .slider li { list-style: none; display: inline; } .content_right .slider img { width: 586px; height: 150px; display: block; } .content_right .num { right: 5px; bottom: 5px; } .content_right .num li { float: left; color: #FF7300; text-align: center; line-height: 16px; width: 16px; height: 16px; font-family: Arial; font-size: 12px; cursor: pointer; overflow: hidden; margin: 3px 1px; border: 1px solid #FF7300; background-color: #fff; } .content_right .num li.on { color: #fff; line-height: 21px; width: 21px; height: 21px; font-size: 16px; margin: 0 1px; border: 0; background-color: #FF7300; font-weight: bold; } </style> <script src="scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> /*首页广告效果*/ $(function () { var len = $(".num > li").length; var index = 0; var adTimer; $(".num li").mouseover(function () { index = $(".num li").index(this); showImg(index); }).eq(0).mouseover(); //滑入 停止动画，滑出开始动画. $('.ad').hover(function () { clearInterval(adTimer); }, function () { adTimer = setInterval(function () { showImg(index) index++; if (index == len) { index = 0; } }, 3000); }).trigger("mouseleave"); }) // 通过控制top ，来显示不同的幻灯片 function showImg(index) { var adHeight = $(".content_right .ad").height(); $(".slider").stop(true, false).animate({ top: -adHeight * index }, 1000); $(".num li").removeClass("on") .eq(index).addClass("on"); } </script> </head> <body> <div class="content_right"> <div class="ad"> <ul class="slider"> <li> <img src="images/ads/1.gif" /></li> <li> <img src="images/ads/2.gif" /></li> <li> <img src="images/ads/3.gif" /></li> <li> <img src="images/ads/4.gif" /></li> <li> <img src="images/ads/5.gif" /></li> </ul> <ul class="num"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </body> </html>