<!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" /> <meta http-equiv="content-style-type" content="text/css"/> <meta http-equiv="content-script-type" content="text/javascript"/> <title>jquery_test</title> <mce:script language="javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js" type="text/javascript"></mce:script> </head> <body> <div id="pidBox"> <ul> <li><img id="picShow" src="images/apple_1_bigger.jpg" mce_src="images/apple_1_bigger.jpg" alt=""/></li> </ul> <p class="pageList ClearFix"><a οnclick="return false" class="active" href="images/apple_1_bigger.jpg" mce_href="images/apple_1_bigger.jpg">1</a><a οnclick="return false" href="images/apple_2_bigger.jpg" mce_href="images/apple_2_bigger.jpg">2</a> <a οnclick="return false" href="images/apple_3_bigger.jpg" mce_href="images/apple_3_bigger.jpg">3</a><a οnclick="return false" href="images/apple_4_bigger.jpg" mce_href="images/apple_4_bigger.jpg">4</a> </p> </div> </body> </html> *,html,body{ margin:0; padding:0; } #pidBox{ width:500px; margin:0 auto; } ul{ list-style:none; } p.pageList a{ padding:5px; background:#000; color:#FFF; float:left; width:10px; margin-right:5px; text-decoration:none; text-align:center; border:1px #fff solid; } p.pageList a:hover{ background:#ccc; color:#000; text-decoration:none; border:1px #000 solid; } p.pageList a.active{ background:#fff; color:#000; text-decoration:none; border:1px #000 solid; } .ClearFix:after{ display: block; clear: both; height: 0; visibility: hidden; content: "."; } .ClearFix{ display: inline-block; } /* Hides from IE 4-6 /*/ * html .ClearFix, * html{ height: 1%; } .ClearFix{ display: block; } $(function(){ var len = $("p.pageList > a").length; var index = 0; var adTimer; $("p.pageList a").click(function(){ index=$("p.pageList a").index(this); auto(index); }); $("#picShow").hover(function(){ clearInterval(adTimer); },function(){ adTimer = setInterval(function(){ index++; if(index==len){index=0;} auto(index); }, 3000 ); }).trigger("mouseleave"); function auto(index){ $("#picShow").attr("src",$("p.pageList a").eq(index).attr("href")).css("opacity","0").fadeTo("slow",1); $("p.pageList a").eq(index).addClass("active"); $("p.pageList a").eq(index).siblings().filter(".active").removeClass("active"); } })
