var scroll = document.getElementById("scroll"); // 獲得大盒子
var ul = document.getElementById("ul"); // 獲得ul
var ulLis = ul.children;// 獲得ul的盒子 以此來(lái)生成ol中l(wèi)i的個(gè)數(shù)
var liWidth = ul.children[0].offsetWidth;// 獲得每個(gè)li的寬度
操作元素
因?yàn)橐鰺o(wú)縫滾動(dòng)，所以要克隆第一張鲤孵，放到最后一張后面
克隆元素
ul.appendChild(ul.children[0].cloneNode(true));
創(chuàng)建ol 和li
vaar ol = document.createElement("ol");//創(chuàng)建ol元素
scroll.appendChild(ol);// 把ol放到scroll盒子里面去
for (var i=0;i
var li = document.createElement("li");// 創(chuàng)建li元素
li.innerHTML = i + 1;// 給li里面添加文字 1 2 3 4 5
ol.appendChild(li);// 將li元素添加到ol里面
}
ol.children[0].className = "current";// ol中的第一個(gè)li背景色為purple
此時(shí)ol li元素即小圓點(diǎn)創(chuàng)建完畢 我們接著用js做動(dòng)畫(huà)
動(dòng)畫(huà)部分包括：
1.鼠標(biāo)經(jīng)過(guò)第幾個(gè)小圓點(diǎn)，就要展示第幾張圖片辰如，并且小圓點(diǎn)的顏色也發(fā)生變化
2.圖片自動(dòng)輪播普监，（這需要一個(gè)定時(shí)器）
3.鼠標(biāo)經(jīng)過(guò)圖片，圖片停止自動(dòng)播放（這需要清除定時(shí)器）
4.鼠標(biāo)離開(kāi)圖片琉兜，圖片繼續(xù)自動(dòng)輪播 （重新開(kāi)始定時(shí)器）
這里我們封裝了一個(gè)animate()動(dòng)畫(huà)函數(shù)
// 動(dòng)畫(huà)函數(shù) 第一個(gè)參數(shù)凯正，代表誰(shuí)動(dòng) 第二個(gè)參數(shù) 動(dòng)多少
// 讓圖片做勻速運(yùn)動(dòng)，勻速動(dòng)畫(huà)的原理是 當(dāng)前的位置 + 速度 即 offsetLeft + speed
function animate(obj,target){
// 首先清除掉定時(shí)器
clearInterval(obj.timer);
// 用來(lái)判斷 是+ 還是 - 即說(shuō)明向左走還是向右走
var speed = obj.offsetLeft < target ? 15 : -15;
obj.timer = setInterval(function(){
var result = target - obj.offsetLeft;//它們的差值不會(huì)超過(guò)speed
obj.style.left = obj.offsetLeft + speed + "px";
// 有可能有小數(shù)的存在豌蟋，所以在這里要做個(gè)判斷
if (Math.abs(result) <= Math.abs(speed)) {
clearInterval(obj.timer);
obj.style.left = target + "px";
}
},10);
}
定時(shí)器 函數(shù)
var timer = null; // 輪播圖的定時(shí)器
var key = 0;// 控制播放的張數(shù)
var circle = 0;// 控制小圓點(diǎn)
timer = setInterval(autoplay,1000);// 自動(dòng)輪播
function autoplay(){
/自動(dòng)輪播時(shí),要對(duì)播放的張數(shù)key進(jìn)行一個(gè)判斷,如果播放的張數(shù)超過(guò)ulLis.length-1,就要重頭開(kāi)始播放. 因?yàn)槲覀兛寺×说谝粡埐⑵浞旁谧詈竺?所以我們要從第二張圖片開(kāi)始播放/
key++; // 先++
