平時中我習慣用jquery寫輪播效果，實現過程不是很難，也很方便，為了加深對js物件導向的理解，我打算用物件導向實現乙個簡單的輪播，這裡採用了字面量的方式實現。為了實現這個過程，我們要自己動手封裝乙個運動函式animate，在這裡我採用的是勻速運動的方式，這種方式可能體驗不是很好，後面分析js**我在詳細解釋。廢話不多說,先上**。頁面布局可以根據自己的習慣來。
html**：
css**：
*.clear
a:hover
.slide
.slide .img-box
.slide .img-box li
.slide .img-box li img
.icon
.icon span
.icon .on
js**：
window.onload = function ()xpos = xpos > xtarget ? xpos - speed : xpos + speed; //輪播方向向左或者向右時的處理
if (ele.movement)
ele.style.left = xpos + 'px';
ele.movement = settimeout(function () ,time);
}function moveindex(spanlist,index)
spanlist[index].classname = 'on';
}function autoplay(obj)
moveindex(obj.aspan,obj.index);
animate(obj.oul,-obj.index * 500,10);
}var slide = ,
play:function()
})(i)}},
autoslide:function(),3000);
},hover:function()
oslide.onmouseout = function(),3000); }}
}//通過物件呼叫物件上的方法
slide.init();
slide.play();
slide.autoslide();
slide.hover();
}
1.animat函式
該函式有三個引數：
ele:要移動的目標元素，我這裡是ul。
xtarget:目標位置，是指ele要移動到的目標位置。
time：指animate函式中的定時器的時間間隔，這裡我用的是20ms。
animate函式中採用了遞迴，每次執行animate函式，ele都會相對於原來的位置移動speed的距離，speed我上面給定的是25，所以整個移動過程是乙個勻速運動過程，但這樣會有乙個不好的體驗，就是目前位置和目標位置距離過大時，整個滑動過程耗時較長，因為勻速嘛，距離越長耗時越多，所以這裡還給出一種演算法， speed=math.ceil(math.abs(xtarget - xpos) / 10)，這是速度逐漸遞減的，由快到慢，距離越長，前面滑動的速度越快，這種體驗會更好一些，這裡我就不給出具體寫法了。
2.moveindex函式
這個函式應該很好理解，就是根據輸入的index引數改變對應索引的元素class名稱。
3.var that = this
這樣的做的目的其實是用that變數儲存呼叫物件中函式的那個物件本身，因為在後續的處理中，可能會用到物件slide的屬性和方法，而在事件處理程式和定時器處理程式中this的指向又發生了改變，所以就率先用that變數儲存好物件，以便需要的時候使用。
這樣就基本實現了乙個物件導向的簡單輪播效果。
原生js實現輪播
分三步 將視口元素設定overflow hidden 將其子元素設定float left 讓橙色的框 包裹 滑動起來 寫出滑動函式，通過索引值的差來判斷左滑還是右滑，索引值的差 寬度等於滑動距離 當前頁面失去焦點之後，瀏覽器會快取動畫，但是setinterval會繼續執行，導致過一會切回頁面的時候動...
原生js實現旋轉輪播
以上是html部分 function animate obj,json,fn else 去掉px 的方法 parseint 25px 25 alert leader var step json k leader 10 step step 0 math.ceil step math.floor ste...
物件導向輪播
物件導向的輪播,的最後一張是第一張圖,的第一張是最後一張圖,滑鼠移入暫停輪播,可點選按鈕和頁碼切換 使用時需要獲取一下對應的元素物件 var outer outer 獲取最大的框 var oinner inner 獲取ul var item inner li 獲取li var leftbtn lef...