進入前端將近一年了，js還是很弱，突發奇想寫一個輪播圖，就找到了這個博主的材料，和大家分享。
輪播圖的原理：
一系列的大小相等的圖片平鋪，利用CSS布局只顯示一張圖片，其余隱藏。通過計算偏移量利用定時器實現自動播放，或通過手動點擊事件切換圖片。
Html布局
首先父容器container存放所有內容，子容器list存在圖片。子容器buttons存放按鈕小圓點。
優化，無縫滾動。
當你從最后一張圖切換回第一張圖時，有很大空白，利用兩張輔助圖來填補這個空白。
這里補充下無縫滾動，直接看代碼，復制最后一張圖片放置第一張圖片前，同時復制第一張圖片放置最后一張圖片的后面。并且，將第一張圖片輔助圖（實際上是實際顯示的第5張圖片隱藏起來，故設置style="left: -600px;"）
CSS修飾
1、對盒子模型，文檔流的理解，絕對定位問題。
2、注意list的overflow:hidden;只顯示窗口的一張圖片，把左右兩邊的都隱藏起來。
3、確保buttons中每個span所在層置頂，將其設置為最頂端。（z-index:999）我這里設置為z-index:2
* {margin: 0;padding: 0;text-decoration: none;}
body {padding: 20px;}
#container {position: relative;width: 600px;height: 400px;border: 3px solid #333;overflow: hidden;}
#list {position: absolute;z-index: 1;width: 4200px;height: 400px;}
#list img {float: left;width: 600px;height: 400px;}
#buttons {position: absolute;left: 250px;bottom: 20px;z-index: 2;height: 10px;width: 100px;}
#buttons span {float: left;margin-right: 5px;width: 10px;height: 10px;border: 1px solid ? ? ? #fff;border-radius: 50%;background: #333;cursor: pointer;}
#buttons .on {background: orangered;}
.arrow {position: absolute;top: 180px;z-index: 2;display: none;width: 40px;height: 40px;font-size: 36px;font-weight: bold;line-height: 39px;text-align: center;color: #fff;background-color: RGBA(0, 0, 0, .3);cursor: pointer;}
.arrow:hover {background-color: RGBA(0, 0, 0, .7);}
#container:hover .arrow {display: block;}
#prev {left: 20px;}
#next {right: 20px;}
Js
首先我們先實現出手動點擊左右兩個箭頭切換圖片的效果：
window.onload=function() {varlist = document.getElementById('list');varprev = document.getElementById('prev');varnext = document.getElementById('next');functionanimate(offset) {//獲取的是style.left，是相對左邊獲取距離，所以第一張圖后style.left都為負值，//且style.left獲取的是字符串，需要用parseInt()取整轉化為數字。varnewLeft = parseInt(list.style.left) +offset;
list.style.left= newLeft + 'px';
}
prev.onclick=function() {
animate(600);
}
next.onclick=function() {
animate(-600);
}
}
運行后我們會發現，一直點擊右箭頭 ，會出現空白，而且，不能回到第一張圖片。要點擊左箭頭才能回到第一張圖片。
利用谷歌瀏覽器F12，原因是我們利用偏移量left來獲取圖片，當看到left值小于3600時，因為沒有第8張圖片就出現空白，所以這里我們需要對偏移量做一個判斷。
在animate函數里加上這么一段：
if(newLeft<-3000){
list.style.left= -600 + 'px';
}if(newLeft>-600){
list.style.left= -3000 + 'px';
}
好，運行一下，沒問題了。輪播圖，顧名思義，是自己會動的圖片，這個時候我們需要用到瀏覽器的內置對象定時器。
對于定時器，有必要說明一下setInterval()跟setTimeout的區別了。簡單來說，setInterval()執行多次，setTimeout()只執行一次。
更具體的用法可以點擊鏈接查看區別：window.setInterval? window.setTimeout 。
這里我們是用setInterval()，因為我們的圖片需要循環滾動。插入下面
vartimer;functionplay() {
timer= setInterval(function() {
prev.onclick()
},1500)
}
play();
運行，ok！
但是，當我們想仔細看某一張圖片時候，要把圖片停住，我們清楚定時器就可以了，這里用到window.clearInterval這個方法。
這里，我們需要對其DOM操作，需要獲取整個輪播圖區域；
varcontainer = document.getElementById('container');functionstop() {
clearInterval(timer);
}
container.onmouseover=stop;
container.onmouseout= play;
但這里，一個輪播圖基本算完成了，有同學·會問，那么簡單?？吹綀D片下面的那一排小圓點沒。我給你加功能了。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
這里是升級版：
varbuttons = document.getElementById('buttons').getElementsByTagName('span');varindex = 1;functionbuttonsShow() {//這里需要清除之前的樣式for(vari = 0; i < buttons.length; i++) {if(buttons[i].className == 'on') {
buttons[i].className= '';
}
}//數組從0開始，故index需要-1buttons[index - 1].className = 'on';
}
prev.onclick=function() {
index-= 1;if(index < 1) {
index= 5;
}
buttonsShow();
animate(600);
}
next.onclick=function() {//由于上邊定時器的作用，index會一直遞增下去，我們只有5個小圓點，所以需要做出判斷index += 1;if(index > 5) {
index= 1;
}
buttonsShow();
animate(-600);
}
現在看起來正常多了吧，但我們想實現通過鼠標任意點擊其中一個小圓點，切換到相應的圖片，原理同樣，我們還是需要通過偏移量去找到對應的圖片。
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
// 在瀏覽器的控制臺打印一下，看看結果
console.log(i);
/* 偏移量獲?。哼@里獲得鼠標移動到小圓點的位置，用this把index綁定到對象buttons[i]上，去谷歌this的用法? */
/* 由于這里的index是自定義屬性，需要用到getAttribute()這個DOM2級方法，去獲取自定義index的屬性*/
var clickIndex = parseInt(this.getAttribute('index'));
var offset = 600 * (index - clickIndex);
animate(offset); //存放鼠標點擊后的位置，用于小圓點的正常顯示
index = clickIndex;
buttonsShow();
}
}
到這一步時，以為大功告成？你在控制臺會發現打印出來的永遠的是i=5。
錯誤原因：沒有正確獲取i值，使用閉包就可以了。你在高級程序設計第三版中76頁，會看到這么一句話：
“對javascript來說，由for語句創建的變量i即使在for循環執行結束后，也依舊會存在于循環外部的執行環境中。”
就是說，js沒有塊級作用域這東西，（可能我C寫多了，混淆了）。在第一次循環（從 i=0 到 4 這一過程）結束后，最后的 i 獲取到的為buttons.length的值被
保存在for循環之外，最后鼠標點擊任何一個小圓點時，自然訪問的一直是 i=5 了。
正確代碼如下：
for(vari = 0; i < buttons.length; i++) {//這里使用的是立即執行函數，(function(i) {
buttons[i].onclick=function() {varclickIndex = parseInt(this.getAttribute('index'));varoffset = 600 * (index -clickIndex);
animate(offset);
index=clickIndex;
buttonsShow();
}
})(i)
}
有關閉包的知識我不展開來說，要說的又一大推，
大家可以參考下我很久之前的博客：頭疼的閉包
大家，可能發現了，這個輪播圖有點奇怪，不中規中矩，它是向左切換的，改寫一下：
functionplay() {//將輪播圖換成向右切換圖片timer = setInterval(function() {
next.onclick();
},2000)? ? ? ? ? ? }
這里結合評論，補充下：
就算是初學者也要特別注意代碼規范問題，上面的CSS實在太不規范了，難怪我帶的人都不怎樣，哈哈哈。。。
Css的書寫順序
CSS里最好不用或直接不用id來改變樣式（我這里是id為了方便DOM操作）
這里推薦css規范的技術文章
前端前輩的博客：http://www.cnblogs.com/hustskyking/p/css-spec.html
或者這位大神的Github：https://github.com/fex-team/styleguide/blob/master/css.md
以及KISSY v1.4 Documentation的css編碼規范：http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/css-coding-style.html
over
原文轉載：http://www.cnblogs.com/LIUYANZUO/p/5679753.html
