var scroll = document.getElementById("scroll"); // 獲得大盒子
var ul = document.getElementById("ul"); // 獲得ul
var ulLis = ul.children;// 獲得ul的盒子 以此來生成ol中l(wèi)i的個數(shù)
var liWidth = ul.children[0].offsetWidth;// 獲得每個li的寬度
// 操作元素
// 因為要做無縫滾動枫浙，所以要克隆第一張逝慧，放到最后一張后面
// 1\. 克隆元素
ul.appendChild(ul.children[0].cloneNode(true));
// 2.創(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中的第一個li背景色為purple
此時ol li元素即小圓點創(chuàng)建完畢 我們接著用js做動畫
動畫部分包括：
1.鼠標經(jīng)過第幾個小圓點谭网，就要展示第幾張圖片，并且小圓點的顏色也發(fā)生變化
2.圖片自動輪播冠骄，（這需要一個定時器）
3.鼠標經(jīng)過圖片锁摔，圖片停止自動播放（這需要清除定時器）
4.鼠標離開圖片，圖片繼續(xù)自動輪播 （重新開始定時器）
這里我們封裝了一個animate()動畫函數(shù)
// 動畫函數(shù) 第一個參數(shù)凿蒜，代表誰動 第二個參數(shù) 動多少
// 讓圖片做勻速運動，勻速動畫的原理是 當(dāng)前的位置 + 速度 即 offsetLeft + speed
function animate(obj,target){
// 首先清除掉定時器
clearInterval(obj.timer);
// 用來判斷 是+ 還是 - 即說明向左走還是向右走
var speed = obj.offsetLeft < target ? 15 : -15;
obj.timer = setInterval(function(){
var result = target - obj.offsetLeft;//它們的差值不會超過speed
obj.style.left = obj.offsetLeft + speed + "px";
// 有可能有小數(shù)的存在胁黑，所以在這里要做個判斷
if (Math.abs(result) <= Math.abs(speed)) {
clearInterval(obj.timer);
obj.style.left = target + "px";
}
},10);
}
定時器 函數(shù)
var timer = null; // 輪播圖的定時器
var key = 0;// 控制播放的張數(shù)
var circle = 0;// 控制小圓點
timer = setInterval(autoplay,1000);// 自動輪播
function autoplay(){
/*自動輪播時,要對播放的張數(shù)key進行一個判斷,如果播放的張數(shù)超過ulLis.length-1,
就要重頭開始播放. 因為我們克隆了第一張并將其放在最后面,所以我們要從第二張圖片開始播放*/
key++; // 先++
