1 添加第一張圖片 oUl.appenChild(lis[0].cloneNode(true))
2.for.遍歷 創(chuàng)建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中里的個數(shù)
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>
