以前圖片輪播經常用網上的插件，然后想說自己也要認真看看，一步一步弄明白，所以就自己研究寫了個圖片輪播的代碼，我自己覺得還算是挺簡單的。如有改進的地方，歡迎你能幫我指出，共同進步。
（ps：博客園如何上傳代碼就是可以供大家下載那種，一直沒找到地方！）
html：
<html>
<body> <div class="main"> <div class="myslide"> <ul class="myslidetwo"> <li><img src="img/dn.jpg"/></li> <li> <img src="img/ey.jpg"/></li> <li><img src="img/fxh.jpg"/></li> <li><img src="img/ss.jpg"/></li> </ul> <p class="arrows"> <a class="pre"><</a> <a class="next">></a> </p> <ol class="label"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> </ol> </div> </div> </body>
</html>
css：
<style> body { background-color: #dddddd; } * { margin: 0px; padding: 0px;list-style: none; } a{ cursor: pointer; } .main { position: relative; width: 500px; height: 350px;margin:40px auto; } .myslide { float: left; position: absolute; overflow: hidden; width: 500px; height: 350px; } .myslidetwo { position: absolute; overflow: hidden; width: 2000px; } .myslidetwo img { float: left; width: 500px; height: 350px; } .label{ position: absolute; bottom: 15px; left: 210px; width: 200px; } .label li { float: left; width:20px;height:20px;line-height:20px;text-align: center; margin-right: 5px; border:1px solid #ddd; font-size: 14px; background: #fff; cursor: pointer; } .label li.current { background: #0f0; } .arrows{ position: absolute; left:0px; top:120px; color:#666; font-size: 40px;font-weight: bold; } .arrows a{ background: rgba(0,0,0,0.2); display: inline-block;width:30px;height: 70px;text-align: center;line-height: 70px; } .arrows a:hover{ color:#fff; } .arrows .pre{ margin-right: 420px; } </style>
jquey：
<script> $(document).ready(function () { var _now=0; var oul = $(".myslidetwo"); var numl = $(".label li"); var wid = $(".myslide").eq(0).width(); //數字圖標實現 numl.click(function () { var index = $(this).index(); $(this).addClass("current").siblings().removeClass(); oul.animate({'left': -wid * index}, 500); }) //左右箭頭輪播 $(".pre").click(function () { if (_now>=1) _now--; else _now=3; ani(); }); $(".next").click(function () { if (_now == numl.size() - 1) { _now = 0; } else _now++; ani(); }); //動畫函數 function ani(){ numl.eq(_now).addClass("current").siblings().removeClass(); oul.animate({'left': -wid * _now}, 500); } //以下代碼如果不需要自動輪播可刪除 //自動動畫 var _interval=setInterval(showTime,2000); function showTime() { if (_now == numl.size() - 1) { _now = 0; } else _now++; ani(); } //鼠標停留在畫面時停止自動動畫，離開恢復 $(".myslide").mouseover(function(){ clearTimeout(_interval); }); $(".myslide").mouseout(function(){ _interval=setInterval(showTime,2000); }); }); </script>