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>
