引言
學習jQuery有年頭了，剛開始學習時自己動手寫過輪播圖，放的久了以至於忘了大致思路了。現在轉而做前端，抽空把jquery輪播圖拿出來寫一寫，把各種思路都自己練習練習，這里主要使用動態修改marginTop來實現。
實現原理
1、除第一張圖片外，其余圖片全部隱藏，4張圖片重疊起來。
2、導航按鈕添加mouseover和mouseleave事件。
3、設置interval函數，啟動定時器調用ShowImg函數。
4、動態修改marginTop屬性達到上下輪播的效果，說道動態修改margin屬性，在以前滑動門中也是這個原理。
效果圖（圖片引用自橡樹小屋博客）
實現代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Index</title>
<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
ul li{list-style: none;}
#scrollpics{width: 478px;height: 286px;overflow: hidden;position: relative;margin:30px 50px;}
.num{position:absolute;right: 8px;bottom: 8px;}
.num li {float:left;color:#FF7300;text-align: center;width: 16px;height: 16px;line-height: 16px;border: 1px solid #FF7300;background-color: #fff; border-radius: 10px;overflow: hidden;cursor: pointer;margin-left: 7px;}
.num li.on {color:#fff;background-color: #FF7300;}
</style>
<script type="text/javascript">
var index=0;
var adTimer;
$(function(){
var len = $("ul.num li").length;
$(".num li").mouseover(function(){
index=$(".num li").index(this);
ShowImg(index);
});
$("#scrollpics").hover(function(){
clearInterval(adTimer);
},function(){
adTimer=setInterval(function(){
ShowImg(index);
index++;
if(index==len){
index=0;
}
},3000)
}).trigger('mouseleave');
});
function ShowImg(index){
var adHeight=$("#scrollpics>ul>li:first").height();
$(".slider").stop(true,false).animate({
"marginTop":-adHeight*index+"px"
},1000);
$(".num li").removeClass("on").eq(index).addClass("on");
}
</script>
</head>
<body>
<div id="scrollpics">
<ul class="slider">
<li><img src="img/p1.jpg"></li>
<li><img src="img/p3.jpg"></li>
<li><img src="img/p4.jpg"></li>
<li><img src="img/p5.jpg"></li>
</ul>
<ul class="num">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>