<!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></title> <mce:style type="text/css"><!-- *{margin:0; padding:0px;} .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; } /*新款上市样式*/ --></mce:style><style type="text/css" mce_bogus="1"> *{margin:0; padding:0px;} .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> <mce:script src="scripts/jquery-1.3.1.js" mce_src="scripts/jquery-1.3.1.js" type="text/javascript"></mce:script> <mce: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"); } // --></mce:script> </head> <body> <div class="content_right"> <div class="ad" > <ul class="slider" > <li><img src="images/ads/1.gif" mce_src="images/ads/1.gif"/></li> <li><img src="images/ads/2.gif" mce_src="images/ads/2.gif"/></li> <li><img src="images/ads/3.gif" mce_src="images/ads/3.gif"/></li> <li><img src="images/ads/4.gif" mce_src="images/ads/4.gif"/></li> <li><img src="images/ads/5.gif" mce_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>