轮播图-again-

巩固知识又做一遍轮播图。方法有点不同，思路都是一致的。
功能：①页面初始，5张图片1秒依次播放（与之前不同的是：之前是缓慢移动每次加固定像素，这次的是每次就展现一张图片，没有缓慢移动的步骤）
②事件绑定：1.鼠标移入：轮播停止；鼠标移出：轮播继续。
2.prev前一个按钮：点击图片向前播放；next后一个按钮：点击图片向后播放。
3.跟随图片序号，底部序号依次变换状态。

实现图片：

注意：
1.需要获取到图片序号，在点击next按钮的时候，需要将当前图片序号+1，也可以理解为不在定时器中的轮播。所以可以将定时器中的运动函数分离出来，简化页面；
2.设置全局变量index。
3.因为，底部序号是和框内图片序号对应的，完全可以共用一个index。

function moveNext(){
	Btnindex++;
	//判断：到最后一个时候，index再加1就超出了界限
	if(Btnindex>=5){
		Btnindex = Btnindex-5;
	} 
	list.style.left = -520*Btnindex+'px';
	//当前序号的底部按钮设置样式，其他都去除样式。
	for(var i = 0; i <oBtn.length; i ++){
		oBtn[i].className = " ";
	}
	oBtn[Btnindex].className = "current"; 
}

在开头就可以这样写：

	//函数执行
	moveImg();
	//函数定义
    function moveImg(){
        timer = setInterval(moveNext,1000);
    }

鼠标移出的时候继续执行：

container.onmouseout = function(){
        moveImg();
    };

前一个按钮：prev

 prev.onclick = function(){
        Btnindex--;
        if(Btnindex<0){
            Btnindex = Btnindex+5;
        }
        list.style.left = -520*Btnindex+'px';
        for(var i = 0; i <oBtn.length; i ++){
            oBtn[i].className = " ";
        }
        oBtn[Btnindex].className = "current";
        
    }

后一个图片按钮：next

next.onclick = moveNext;