javascript原生代碼——輪播實現效果圖——
【效果實例】
由於剛剛入手，不是特別了解博客園是怎么使用的。本來是想將整個效果插入到這里來的，但是不知道該怎樣使用，還請各位多多理解，這個功能也是能夠使用javascript實現的，將練習用吧，寫的不夠好大家慢慢看，提一些意見。謝謝哈！！
【原理簡述】
主要是使用html和css還有jquery實現。主要有幾個公共的函數、if語句。至於主體邏輯還是挺簡單的。
【程序主要代碼】
簡單看一下代碼，特別簡單，而且效果挺好。
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<style style="text/css"> //使用了內部css（主要是讓大家能夠更好的看到並且能夠讓大家更方便一些）
#div1{
overflow:hidden;
height:300px;
width:500px;
border:1px solid red;
margin-top:200px;
}
img{
width:500px;
height:300px;
float:left;
z-index:-1;
}
#ul1{
margin-left:-40px;
margin-top:0px;
}
li{
list-style:none;
}
</style>
<body>
<div id="div1">
<ul id="ul1">
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
<li><img src="1.jpg"></li>
</ul>
</div>
</body>
<script src="jquery-1.6.js"></script>
<script>
$(function(){
m=0;
s=setTimeout(lun,100);
function lun(){
m+=10;
$("#ul1").css("marginTop",-m+"px");
if(m==300||m==600||m==900){ //到達300、600、900的時候，輪播圖片將停止一下
setTimeout(lun,2000);
}
else if(m>=1200){
m=0;
s=setTimeout(lun,2000);
}else{
s=setTimeout(lun,100);
}
}
});
</script>
</html>
其中每一個圖片的高度都是300，一共有三張圖片。還有重要的一點就是圖片的名字必須只相差一個數字。例如（q1.png，q2.png，q3.png），因為當圖片自動輪播的時候可以使用for循環 循環之中的每一個數字。
【思路】
首先將簡單的布局排好，然后進入js中，剛開始按照以兩秒的時間進行輪播，到達圖片的高度也是300的時候，輪播將停止0.1毫秒。然后通過for循環進入第二張圖片按章以上的順序依次執行。到達最后一張圖片時，他會直接返回到0.再重新從第一張圖片開始。