<!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 runat="server"> <script src="Script/jquery-1.9.1.min.js" type="text/javascript"></script> <title></title> <style type="text/css"> body{text-algin:center;margin:0px;font-size:12px; font-family:Arial, Helvetica, sans-serif;padding:36px 0px 0px 0px; color:#6b6b6b;} ul,li,ol,h1,h2,h3,h4{margin:0px; padding:0px;color:#804f21;} ul,li,ol{list-style:none;} p{margin:0px; padding:0px;color:#6b6b6b;word-break: break-all; } img{border:0px;} a{color:#804f21;text-decoration:none;} a:hover{color:#804f21;text-decoration:underline;border:none;*vertical-align:baseline;} #slidecont{width:635px;z-index:0;float:left;margin-left:5px;display:inline;height:342px;position:relative;} #slideimg{width:635px;margin:0px auto;height:342px;overflow:hidden;z-index:-1;} #slidebtn{bottom: 6px;height: 23px;padding: 0 8px 0 10px;position: absolute;right: 0;z-index:2;} #slidebtn a{float:left;background-color: #FFFFFF;display: block;height: 24px;line-height: 24px;margin-left: 5px;text-align: center;width: 25px;opacity:0.4;filter:alpha(opacity=50); text-decoration:none;} #slidebtn a.activeSlide{ width: 25px;height: 24px;display:block;opacity:1;filter:alpha(opacity=100);} .hotpic{ width:635px; height:342px; position:relative; overflow:hidden; padding:0px;margin:0px 0px 0px 4px;} .num{ position:absolute;right:6px; top:310px; z-index:10;} .num a{ width:20px; height:20px; line-height:20px;display:inline-block; text-align:center; margin:0px 4px 0px 0px; cursor:pointer; text-decoration:none; color:#977037; font-weight:bold; border:1px solid #fff; background:#fcf9f4;font-size:14px;} .num a.cur{ background:#977037;color:#fff;} </style> <script type="text/javascript"> $(function () { var sw = 0; $(".hotpic .num a").mouseover(function () { sw = $(".num a").index(this); myShow(sw); }); function myShow(i) { $(".hotpic .num a").eq(i).addClass("cur").siblings("a").removeClass("cur"); $(".hotpic ul li").eq(i).stop(true, true).fadeIn(600).siblings("li").fadeOut(600); } $(".hotpic").hover(function () { if (myTime) { clearInterval(myTime); } }, function () { myTime = setInterval(function () { myShow(sw) sw++; if (sw == 8) { sw = 0; } }, 3000); }); var myTime = setInterval(function () { myShow(sw) sw++; if (sw == 8) { sw = 0; } }, 3000); }) </script> </head> <body> <div id="slidecont"> <div class="hotpic"> <div class="num"> <a class="cur">1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a> <a>6</a> <a>7</a> </div> <ul> <li> <a href="" target="_blank"><img src="http://p.sfbest.com/web/abc6dc83/abc6dc830af9b473e284fbe77fcf6e3e.jpg" width="635" height="342" alt="周末特卖会第20期"></a> </li> <li> <a href="" target="_blank"><img src="http://p.sfbest.com/web/4fc7d3ce/4fc7d3ced704a4ff45d4ecdd4b0c1fe8.jpg" width="635" height="342" alt="会员回馈"></a> </li> <li> <a href="" target="_blank"><img src="http://p.sfbest.com/web/862fd5b5/862fd5b516a42b0f7dd95f9397b7076d.jpg" width="635" height="342" alt="特殊配方奶粉"></a> </li> <li> <a href="" target="_blank"><img src="http://p.sfbest.com/web/d41afb28/d41afb2809d2bb918095f10cfb77fe1b.jpg" width="635" height="342" alt="啤酒节晚上9点更新"></a> </li> <li> <a href="" target="_blank"><img src="http://p.sfbest.com/web/4dd6511e/4dd6511e3eae0f51068a8160ddb74366.jpg" width="635" height="342" alt="迈萨维诺橄榄油"></a> </li> <li> <a href="" target="_blank"><img src="http://p.sfbest.com/web/d1149821/d1149821dfc2dd102c458a3dddc62393.jpg" width="635" height="342" alt="低卡低脂低糖-饼干"></a> </li> <li> <a href="" target="_blank"><img src="http://p.sfbest.com/web/08e5699b/08e5699b442530dd2fbd1317807e5732.jpg" width="635" height="342" alt="频道-小而美的酿酒国家"></a> </li> </ul> </div> </div> </body> </html>