Sublime Text
01首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示
02然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头
03接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明
04最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能
05最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图
一、思路:页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变。
二、提示:
1、 index不能一直无限制的递增下去，需做判断
2、调用切换图片函数时需将递增之后的index作为参数传过去
<body><div class="wrap" id='wrap'>
<ul id="pic">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<input value="上一张" onclick="" type="button"/>
<input value="下一张" onclick="" type="button"/>
</div>
<script type="text/javascript">
var wrap=document.getElementById('wrap'),
pic=document.getElementById('pic').getElementsByTagName("li"),
list=document.getElementById('list').getElementsByTagName('li'),
index=0
function autoPlay (type) {//type==0--上一张type==1--下一张
if(type==0)index--
else if(type==1)index++
if (index >= pic.length) index = 0//如果Index大于照片数量就从第一张开始
changePic(index)
}
// 定义图片切换函数
function changePic (curIndex) {
for (var i = 0 i < pic.length ++i) {
pic[i].style.display = "none"
list[i].className = ""
}
pic[curIndex].style.display = "block"
list[curIndex].className = "on"
}
</script>
</body>
我只是大致写的一个例子，你自己调试。
html使用&符号要进行转义。请使用“&” 代替“&”
参考：
HTML字符实体（Character Entities），转义字符串（Escape Sequence）为什么要用转义字符串？
HTML中<，>，&等有特殊含义（<，>，用于链接签，&用于转义），不能直接使用。这些符号是不显示在我们最终看到的网页里的，那如果我们希望在网页中显示这些符号，该怎么办呢？
这就要说到HTML转义字符串（Escape Sequence）了。
转义字符串（Escape Sequence）也称字符实体(Character Entity)。在HTML中，定义转义字符串的原因有两个：第一个原因是像“<”和“>”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时，要严格遵守字母大小写的规则。第二个原因是，有些字符在ASCII字符集中没有定义，因此需要使用转义字符串来表示。
转义字符串的组成
转义字符串（Escape Sequence），即字符实体（Character Entity）分成三部分：第一部分是一个&符号，英文叫ampersand；第二部分是实体（Entity）名字或者是#加上实体（Entity）编号；第三部分是一个分号。
比如，要显示小于号（<），就可以写 <或者 <。
用实体（Entity）名字的好处是比较好理解，一看lt，大概就猜出是less than的意思，但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity)编号，各种浏览器都能处理。
提示：实体名称（Entity）是区分大小写的。
备注：同一个符号，可以用“实体名称”和“实体编号”两种方式引用，“实体名称”的优势在于便于记忆，但不能保证所有的浏览器都能顺利识别它，而“实体编号”则没有这种担忧，但它实在不方便记忆。
如何显示空格？
通常情况下，HTML会自动截去多余的空格。不管你加多少空格，都被看做一个空格。比如你在两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，你可以使用 表示空格。
