10.1 无缝轮播 图片是float left 注意与 网易

1 添加第一张图片 oUl.appenChild(lis[0].cloneNode(true))
2.for.遍历 创建li
3.oLi.appendChild(li)
4.给 li 中的第一个 ol 添加类名
5.,for 遍历 排他思想 设置 ol
6 用更新ol 的索引的对应的ul中的li一起滚动
7 调用封装好的匀速动画的框架
8 contan(obj.target.speed)
<script src="myFn.js"></script>
<script>
window.onload = function () {
// alert(0)
var all = document.getElementById('all');
var top = document.getElementById('top');
var oul = document.getElementById('oul');
var ol = document.getElementById('ol');
var lis = oul.children;
var bigIndex = 0;
var smallIndex = 0;
// var timer = null;
//那么我们首先是先添加一张图片放在最后面 而这张图片的第一张

    oul.appendChild(lis[0].cloneNode(true));
   // console.log(oul.children.length);    //6
    //
    for (var i = 0; i < lis.length - 1; i++) {
        //添加小圆点 这里 添加的不只是一个ol li 的一个点  而是一整排里面的5个小圆点 因为for 遍历的是oul中里的个数
      var oli=document.createElement('li');
        ol.appendChild(oli);//这行注意小括号里面不能有冒号

// console.log(ol.children.length); //5
}
ol.children[0].className = 'curr';
//让 移动到小圆点的时候 让对应的小圆点的颜色为red
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].index = i;

        ol.children[i].onmouseover = function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className= '';
            }
            ol.children[this.index].className = 'curr';
            constant(oul,20,-this.index*750);

// oulIndex = this.index;
// smallIndex = this.index;
// oulIndex = smallIndex = this.index;
}
}
//自动起来
var timer = setInterval(autoPlay,1000);
function autoPlay() {
bigIndex ++;
if (bigIndex> lis.length - 1) {
bigIndex = 1;
oul.style.left = 0 + 'px';
}
constant(oul,20,-bigIndex * 750);
smallIndex ++;
if (smallIndex > ol.children.length - 1) {
smallIndex = 0;
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[smallIndex].className = 'curr';
}
}
</script>