<!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> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <style type="text/css">*{margin:0; padding:0; border:0; font-size:12px;} a{ text-decoration:none;} ul,li{ list-style:none;} .clear-fix{*zoom:1;} .clear-fix:after{ clear:both; display:block; height:0; content:"\0020";} .flash{ width:986px; height:314px; margin:0 auto; border:1px solid #000; overflow:hidden; position:relative;} .flash ul{ width:5000px;} .flash li{width:986px; height:314px; text-align:center; line-height:314px; background:#ccc; float:left;} .flash .num{ position:absolute; bottom:20px; right:20px;} .flash a{ width:15px; height:15px; display:inline-block; text-align:center; line-height:15px; color:#000; background:green; border:1px solid #fff;} .flash a.current{ background:pink; color:#fff;}</style> </head> <body> <div class="flash"> <ul class="clear-fix"> <li>图片-</li> <li>图片二</li> <li>图片三</li> </ul> <div class="num"> <a href="javascript:void(0)" rel="nofollow" class="current">1</a> <a href="javascript:void(0)" rel="nofollow">2</a> <a href="javascript:void(0)" rel="nofollow">3</a> </div> </div> <script type="text/javascript">//自动播放 function slide(n){ if(n>=$(".num a").length){ n=0; } var mleft=$("li").eq(n).index()*986; $(".num a").eq(n).addClass("current").siblings().removeClass("current"); $("ul").animate({marginLeft:-mleft},1000); n++; t=setTimeout('slide('+n+')',3000); } slide(0); $(".num a").hover(function(){ clearTimeout(t); slide($(this).index()); })</script> </body> </html>