焦点轮播图（3） 无限滚动

本篇实现图片的无限滚动效果。
因为图片改变是left值改变来控制的，所以，要实现无限滚动的效果就需要left值也在值段范围内无限滚动改变。

向左滑动图片时，当left < -3000，left归位到第一张图 -600；
向右滑动图片时，当left > -600，left归位到最后一张图-3600；

在change函数里面添加判断归位语句（对此函数稍作优化）：

function change(offset){                    var newleft = parseInt(list.style.left) + offset;                    list.style.left = newleft + 'px';                    if(newleft > -600){//归位                        list.style.left = -3000 + 'px';                    }                    if(newleft < -3000){                        list.style.left = -600 + 'px';                    }                }

此时已经能够实现图片无限滚动了，不会出现空白页。但是在图片显示时，小圆点对应的不能正常点亮。默认点亮第一个。
现在来写小圆点点亮事件：

var index = 1;//显示第几个小圆点                function showButton(){                    for(var i = 0;i < buttons.length; i++){                        if (buttons[i].className == 'on'){                            buttons[i].className = '';                            break;                        }                    }                    buttons[index - 1].className = 'on';//改变classname改变小圆点的样式                }

在切换图片时，之前图片的小圆点点亮样式要清除掉。用遍历的方式找到亮起的小圆点，将class置为空。

点击箭头小圆点移动：

next.onclick = function() {                    index++;                    showButton();                    change(-600);                }                prev.onclick = function() {                    index--;                    showButton();                    change(600);                }

在点击next和prev箭头时，index一直++,或者– ，那么当index超出5或者1则没有对应的图片显示，所以得有index归位的判断：

next.onclick = function() {                    if(index == 5){                        index = 1;                    }                    else{                        index += 1;                    }                    showButton();                    change(-600);                }                prev.onclick = function() {                    if(index == 1){                        index = 5;                    }                    else{                        index -= 1;                    }                    showButton();                    change(600);                }

现在图片就能通过箭头切换无限滚动，小圆点也能依次的改变样式！