骨刻文字数字化识别9

---

一、轮播图片

整体结构与思路
Html部分：三个div，最外层id为parent的大div内包含了uls和buttons两个div，divuls中包含了两个列表img_ul（图片列表）, litCir_ul（小圆点列表），divbuttons里则包含了“左”， “右”两个按钮。

CSS部分

二、功能实现

1.简单滚动

function Roll(distance){                                         
clearInterval(img_ul.timer);                                   
var speed = img_ul.offsetLeft < distance ?  rate : (0-rate);     

img_ul.timer = setInterval(function(){                           //设置定时器，每隔10毫秒，调用一次该匿名函数
    img_ul.style.left = img_ul.offsetLeft + speed + "px";               
    var leave = distance - img_ul.offsetLeft;                        

    if (Math.abs(leave) <= Math.abs(speed)) {                    
        clearInterval(img_ul.timer);
        img_ul.style.left = distance + "px";
    }
},10);
}

2.自动滚动

function autoRun(){
    picN++;
    cirN++;
    if(picN > len){                  //滚动完克隆项后
        img_ul.style.left = 0;       /
        picN = 1;                   
    Roll(-picN*width);
    
    if(cirN > len-1){                
        cirN = 0;                 
    }
    for(var i=0; i<len; i++){
        cLis[i].className = "quiet";
    }
    cLis[cirN].className = "active";
}

开始自动滚动：
timer = setInterval(autoRun, gap);