一个焦点图轮换(修改了一bug，当鼠标快速移动时，切换图片错乱)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无标题文档</title>
<style>
html, body { height:100%;}
body, div, ul,ol, li, p, h1, h2, dl, dt, dd, th, td { margin:0; padding:0;}
li { list-style:none;}
img { border:none; vertical-align:top;}
a { text-decoration:none;}
a:hover { text-decoration:none;}
em, code { font-style:normal;}
table { width:100%; border-collapse:collapse; border-spacing:0;}
/**/
body { font:12px/1.2em Verdana, Geneva, sans-serif;}
.warper { width:355px; margin:0 auto;}
.showPic { width:355px; height:222px; margin-top:50px; position:relative; overflow:hidden;}
.showPic img { width:353px; height:220px;}
.picCont { visibility:hidden; overflow:hidden;}
.showPic ol { height:222px; width:1000em; position:absolute; top:0 ; left:0;}
.showPic ol li { float:left;}
.showPic ol img { border:1px solid #ccc;}
.Num { position:absolute; bottom:3px; right:3px; height:10px; z-index:999; margin:0; padding:0;}
.Num li { background:#fc0; color:#fff; float:left; display:inline; line-height:10em; overflow:hidden; height:10px; width:10px; border-radius:10px; margin-left:2px; cursor:pointer;}
.Num li.cur { font-weight:700; color:#F00; background:#f00;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(function(){
showPic();
});
function showPic(){
var _lis =$(".picCont li"),
_ol = $(".showPic ol"),
liLen = _lis.length-1,
liW = _lis.width(),
tempArr = [],
curIdx=0,
timer;
(function init(){
$(".picCont li:first").clone().appendTo(_ol);
for(var i =0; i < liLen+1 ;i++){
tempArr.push(i+1);
}
$(".Num").html("<li>"+tempArr.join("<\/li><li>")+"<\/li>");
})();
var numLi = $(".Num li");
cur(numLi.eq(curIdx));
$(".showPic").hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(autoImg,3000);
}).trigger("mouseleave");
numLi.mouseover(function(){
curIdx = $(this).index();
move(curIdx);
});
function autoImg(){
var idx = $(".Num").find("li.cur").index();
idx = (idx==liLen) ?0 : idx+1;
move(idx);
}
function move(i){
if(!_ol.find("li:first").is(":animated")){
cur(numLi.eq(i));
_lis.eq(i).clone().appendTo(_ol);
_ol.find("li:first").animate({"margin-left":-liW},300,function(){
$(this).remove();
});
}
}
function cur(ele,currentClass,tag){
var ele= $(ele) || ele,
tag= tag ||"",
mark= currentClass ||"cur";
ele.addClass(mark).siblings(tag).removeClass(mark);
}
}
</script>
</head>
<body>
<div class="warper">
<div class="showPic">
<ul class="picCont">
<li><a href="#nogo"><img src="http://i6.2qimg.com/static/team/2011/0930/8bd480af219bdbcb_mini.jpg" alt="1"/></a></li>
<li><a href="#nogo"><img src="http://i9.2qimg.com/static/team/2011/0914/f45e7d1faa4f0ec6_mini.jpg" alt="2"/></a></li>
<li><a href="#nogo"><img src="http://i6.2qimg.com/static/team/2011/1008/f57feea041c88889_mini.jpg" alt="3"/></a></li>
<li><a href="#nogo"><img src="http://i9.2qimg.com/static/team/2011/1008/d44f96141eb010b9_mini.jpg" alt="4"/></a></li>
</ul>
<ol></ol>
<ul class="Num"></ul>
</div>
</div>
</body>
</html>
这是效果图片（chrome）：
