完整的 JavaScript 代码如下：
<script type="text/javascript">
//得到所有元素
//左按钮
var leftBtn = document.getElementById("leftBtn");
//右按钮
var rightBtn = document.getElementById("rightBtn");
//图片列表
var oLis = document.getElementById("smallCarousel").getElementsByTagName("li");
//信号量
var idx = 0;
//事件监听，右按钮
rightBtn.onclick = function(){
//先更改信号量
idx++;
if(idx > oLis.length - 1){
idx = 0;
}
//切换图片
changePic();
}
//事件监听，左按钮
leftBtn.onclick = function(){
//先更改信号量
idx--;
if(idx < 0){
idx = oLis.length - 1;
}
//切换图片
changePic();
}
//更改图片函数
function changePic(){
//去掉所有 li 的 cur 类
for(var i = 0 ; i < oLis.length ; i++){
oLis[i].className = "";
}
//给当前信号量的 li 标签增加 cur 类
oLis[idx].className = "cur";
}
</script>
看一下程序的细节：
程序主要由两个按钮的事件监听、更改图片函数组成。可以看出，不管我们点击哪个按钮，都是先更改信号
量，然后再调用更改图片函数让 li 标签的 cur 类进行切换。这就是信号量的编程思维，“DOM 未动，信号先行”，
不要着急改变 li 标签，而是先改变信号量。
由于是轮播，即当图片到最后一张时，再次点击右按钮即可回到第 1 章图片，所以按钮的事件处理函数中，
有对信号量进行“验收”的 if 语句：
idx++;
if(idx > oLis.length - 1){
idx = 0;
}
最后一个 li 的下标是 oLis.length - 1，为什么要减 1 呢？因为数组的下标是从 0 开始开始数的，最后
一个 li 的下标一定是 li 总数减 1。当信号量的值大于这个值时，要将信号量重置为 0。
我们再看一下用来更改图片显示的函数：
//更改图片显示的函数
function changePic(){
//去掉所有 li 的 cur 类
for(var i = 0 ; i < oLis.length ; i++){
oLis[i].className = "";
}
//给当前信号量的 li 标签增加 cur 类
oLis[idx].className = "cur";
}
这个函数使用了“排他算法”：先使用循环语句去掉所有 li 标签的 cur 类，然后再单独给当前信号量的 li
标签增加 cur 类。这种算法思维是非常常见的。
