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ù)?動多少
//?讓圖片做勻速運動按灶，勻速動畫的原理是?當前的位置?+?速度??即?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";
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++;?//?先++
