<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <body> <h1>jQuery常用焦点图，可做选项卡切换</h1> <style type="text/css"> * { margin:0; padding:0; } ul { list-style:none; } img { border:none; } .demo{ 640px; height:200px; position:relative; overflow:hidden; border:#ddd 1px solid;padding:5px;} .num{ position:absolute;right:10px; top:10px; z-index:10;} .num a{ 16px; height:16px; display:inline-block; text-align:center; margin:0 3px; cursor:pointer;} .num a.cur{ background:#ff6700;color:#fff;} .demo ul{ position:relative; z-index:5;} .demo ul li{ position:absolute; display:none;} </style> <div class="demo"> <div class="num"><a class="cur">1</a><a>2</a><a>3</a></div> <ul> <li style="display:block;"><a href="http://www.daqianduan.com/web-design-30-html5/" target="_blank"><img src="http://www.daqianduan.com/wp-content/uploads/2010/06/html5.png" /></a></li> <li><a href="http://www.daqianduan.com/wp-content/uploads/2010/06/ipad.png" target="_blank"><img src="http://www.daqianduan.com/wp-content/uploads/2010/06/ipad.png" /></a></li> <li><a href="http://www.daqianduan.com/css-efficiency-browsers-render-speed/" target="_blank"><img src="http://www.daqianduan.com/wp-content/uploads/2010/06/css.jpg" /></a></li> </ul> </div> <script type="text/javascript"> $(function(){ var sw = 0; $(".demo .num a").mouseover(function(){ sw = $(".num a").index(this); myShow(sw); }); function myShow(i){ $(".demo .num a").eq(i).addClass("cur").siblings("a").removeClass("cur"); $(".demo ul li").eq(i).stop(true,true).fadeIn(600).siblings("li").fadeOut(600); } //滑入停止动画，滑出开始动画 $(".demo").hover(function(){ if(myTime){ clearInterval(myTime); } },function(){ myTime = setInterval(function(){ myShow(sw) sw++; if(sw==3){sw=0;} } , 3000); }); //自动开始 var myTime = setInterval(function(){ myShow(sw) sw++; if(sw==3){sw=0;} } , 3000); }) </script> </body> </html>