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.再重新从第一张图片开始。