<!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>lin_jquery</title>
<style type="text/css">
.linContainer{margin:10px auto;width:790px;}
.linBox{width:790px;overflow:hidden;height:300px;position:relative;z-index:1;}
.linBoxImg{position:absolute;z-index:10;}
img{border:none;}
.linBoxImg img{float:left;}
.clearBoth{clear:both;}
.linNum{position:absolute; top:230px;right:40px;z-index:100;}
.linNum a{color:#000000;padding:5px;text-decoration:none;}
.linActive{font-weight:bold;}
.linNum a.linActive{color:#ffff00;text-decoration:underline;}
</style>
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
</head>
<body>
<div class="linContainer">
<div class="linBox">
<div class="linBoxImg">
<a href="x"><img src="./images/reel_1.jpg" /></a>
<a href="2"><img src="./images/reel_2.jpg" /></a>
<a href="3"><img src="./images/reel_3.jpg" /></a>
<a href="4"><img src="./images/reel_4.jpg" /></a>
<br class="clearBoth" />
</div>
<div class="linNum">
<a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
var imgWidth = $(".linBox img").width();
var imgNum = $(".linBox img").size();
var imgTotal = imgWidth * imgNum;
var leftWidth = 0;
var nnn = 0;
var leftTotal = -imgWidth * (imgNum - 1);
$(".linNum a").eq(0).addClass("linActive");
$(".linBoxImg").css({"width": imgTotal});
play = function(){
ok = setInterval(function(){
$(".linBoxImg").animate({left:leftWidth});
leftWidth -= imgWidth;
$(".linNum a").removeClass("linActive");
$(".linNum a").eq(nnn).addClass("linActive");
nnn++;
if(leftWidth < leftTotal){
leftWidth = 0;
nnn = 0;
}
}, 2000);
};
play();
$(".linNum a").hover(function(){
$(".linNum a").removeClass("linActive");
$(this).addClass("linActive");
var nn = $(this).index();
leftWidth = -nn * imgWidth;
$(".linBoxImg").animate({left:leftWidth});
clearInterval(ok);
}, function(){
$(this).removeClass("linActive");
play();
});
$(".linNum a").click(function(){ // 清除点击
return false;
});
});
</script>
</body>
</html>