三个div，最外层id为 parent 的大div内包含了 uls 和 buttons 两个div，div uls 中包含了两个列表 img_ul （图片列表）, litCir_ul （小圆点列表），div buttons 里则包含了“左”， “右”两个按钮。
之所用js添加小圆点，是因为小圆点的数量是由图片张数决定的。
默认 li 的 class 为 quiet , 第一张默认为 active 。
首先先理解该轮播图如何滚动，这里是通过控制 img_ul 的 left 值来控制显示某张图片， 为了实现“滚动”的效果，我们需要 逐渐 改变 img_ul 的 left 值，而不能直接使该值变化图片宽度的倍数。这里我们定义一个动画效果函数 Roll() 。
试想下面的情况，当图片从最后一张切换到第一张时，这时就不能通过逐渐改变 img_ul 的 left 值来实现滚动的效果，于是 克隆第一张图片至列表尾部，当滚动完最后一张图片时，继续滚动到克隆的第一张，然后将 img_ul 的 left 值置为0。
需要注意的是小圆点和图片列表的 li 数目是不一样的，当滚动到最后一个克隆项时，此时小圆点实际上在第一个位置。
开始自动滚动：
timer = setInterval(autoRun, gap)
给每个小圆点绑定了onmouseover事件，这个方法有个细节，会根据两次小圆点的距离差调整速率为 rate*times ，使切换效果更自然（也就是说每次切换说花的时间基本一致，无论是第一张到第二张，还是第一张到最后一张）。
触及区域，清除定时器，显示按钮。
离开区域，添加定时器，隐藏按钮。
自动播放就是间隔一定时间不断调用函数“下一张”的过程，所以这里的按钮 right 下一张的实现就是上面的 autoRun 函数。
以上就是轮播图各部分的实现原理，如果你有其他的方法，欢迎一起交流！
2019.3.30更新：
用requestAnimationFrame()实现一个轮播图
首先init()函数用于初始化images数组和image的值，本例中主要是利用setSrc()设置图片的src属性值，这样就达到了图片的切换，图片的轮播是使用定时器来时显的！setInterval('play()',500)的意思是每0.5s调用一次play()函数！<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
var timeID
var image
var current = 0
var images = new Array(5)
function init(){
for (var i=1i<=5i++){
images[i] = new Image(450,550)
images[i].src = "pictures/"+i+".jpg"
}
image = document.images[0]
}
function setSrc(i){
current = i
//设置图片src的属性，实现图片的切换
image.src = images[i].src
}
function pre(){
if (current <= 0){
alert('已经是第一张了')
}else{
current--
setSrc(current)
}
}
function next(){
if (current >= 5){
alert('已经是最后一张了')
}else{
current++
setSrc(current)
}
}
function play(){
if (current >= 5){
current = 0
}
setSrc(++current)
}
</script>
<body onload="init()">
<input type="button" value="第一张" onclick="setSrc(1)">
<input type="button" value="上一张" onclick="pre()">
<input type="button" value="下一张" onclick="next()">
<input type="button" value="最后一张" onclick="setSrc(5)">
<input type="button" value="幻灯播放" onclick="timeID=setInterval('play()',500)">
<input type="button" value="停止播放" onclick="clearInterval(timeID)">
<div style="border:1px solid bluewidth:450pxheight:550px" id="myPic">
<img src="pictures/1.jpg" />
</div>
</body>
</html>
<script type="text/javascript">var t = n = 0, count
$(document).ready(function(){
count=$("#ban_list a").length//获取图片数目
$("#ban_list a:not(:first-child)").hide()//除第一张图片都隐藏
$("#ban_info").html($("#ban_list a:first-child").find("img").attr('alt'))//这个是把alt里的内容作为标题
$("#ban_info").click(function(){window.open($("#ban_list a:first-child").attr('href'), "_blank")})//给标题绑定点击事件，添加链接
$("#ban li").click(function() { //按钮点击事件
var i = $(this).text() - 1//获取Li元素内的值，即1，2，3，4
n = i
if (i >= count) return
$("#ban_info").html($("#ban_list a").eq(i).find("img").attr('alt'))//重新获取标题
$("#ban_info").unbind().click(function(){window.open($("#ban_list a").eq(i).attr('href'), "_blank")})//重新绑定标题点击事件
$("#ban_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000)//渐进渐出效果
document.getElementById("ban").style.background=""
$(this).toggleClass("on")//切换按钮样式
$(this).siblings().removeAttr("class")
})
t = setInterval("showAuto()", 4000)
$("#ban").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000)})
})//鼠标指上停止轮播
function showAuto()//实现轮播的函数
{
n = n >=(count - 1) ? 0 : ++n
$("#ban li").eq(n).trigger('click')
}
</script>
<div id="ban">
<div id="ban_bg"></div>
<div id="ban_info"></div>
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="ban_list">
<a href="/Item/Show.asp?m=1&d=3824" target="_blank"><img src="/UploadFiles/2012-08/admin/2012081511562273110.jpg" alt="" width="414" height="286" /></a>
</div>
