進(jìn)入前端將近一年了，js還是很弱拧额，突發(fā)奇想寫(xiě)一個(gè)輪播圖碑诉，就找到了這個(gè)博主的材料彪腔，和大家分享侥锦。
輪播圖的原理：
一系列的大小相等的圖片平鋪，利用CSS布局只顯示一張圖片德挣，其余隱藏恭垦。通過(guò)計(jì)算偏移量利用定時(shí)器實(shí)現(xiàn)自動(dòng)播放，或通過(guò)手動(dòng)點(diǎn)擊事件切換圖片。
Html布局
首先父容器container存放所有內(nèi)容番挺，子容器list存在圖片唠帝。子容器buttons存放按鈕小圓點(diǎn)。
優(yōu)化玄柏，無(wú)縫滾動(dòng)襟衰。
當(dāng)你從最后一張圖切換回第一張圖時(shí)，有很大空白粪摘，利用兩張輔助圖來(lái)填補(bǔ)這個(gè)空白瀑晒。
這里補(bǔ)充下無(wú)縫滾動(dòng)，直接看代碼徘意，復(fù)制最后一張圖片放置第一張圖片前苔悦，同時(shí)復(fù)制第一張圖片放置最后一張圖片的后面。并且椎咧，將第一張圖片輔助圖（實(shí)際上是實(shí)際顯示的第5張圖片隱藏起來(lái)玖详，故設(shè)置style="left: -600px;"）
CSS修飾
1、對(duì)盒子模型勤讽，文檔流的理解蟋座，絕對(duì)定位問(wèn)題。
2地技、注意list的overflow:hidden;只顯示窗口的一張圖片蜈七，把左右兩邊的都隱藏起來(lái)。
3莫矗、確保buttons中每個(gè)span所在層置頂飒硅，將其設(shè)置為最頂端。（z-index:999）我這里設(shè)置為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
首先我們先實(shí)現(xiàn)出手動(dòng)點(diǎn)擊左右兩個(gè)箭頭切換圖片的效果：
window.onload=function() {varlist = document.getElementById('list');varprev = document.getElementById('prev');varnext = document.getElementById('next');functionanimate(offset) {//獲取的是style.left作谚，是相對(duì)左邊獲取距離三娩，所以第一張圖后style.left都為負(fù)值，//且style.left獲取的是字符串妹懒，需要用parseInt()取整轉(zhuǎn)化為數(shù)字雀监。varnewLeft = parseInt(list.style.left) +offset;
list.style.left= newLeft + 'px';
}
prev.onclick=function() {
animate(600);
}
next.onclick=function() {
animate(-600);
}
}
運(yùn)行后我們會(huì)發(fā)現(xiàn)，一直點(diǎn)擊右箭頭 眨唬，會(huì)出現(xiàn)空白会前，而且，不能回到第一張圖片匾竿。要點(diǎn)擊左箭頭才能回到第一張圖片瓦宜。
利用谷歌瀏覽器F12，原因是我們利用偏移量left來(lái)獲取圖片岭妖，當(dāng)看到left值小于3600時(shí)临庇，因?yàn)闆](méi)有第8張圖片就出現(xiàn)空白反璃，所以這里我們需要對(duì)偏移量做一個(gè)判斷。
在animate函數(shù)里加上這么一段：
if(newLeft<-3000){
list.style.left= -600 + 'px';
}if(newLeft>-600){
list.style.left= -3000 + 'px';
}
好假夺，運(yùn)行一下淮蜈，沒(méi)問(wèn)題了。輪播圖已卷，顧名思義梧田，是自己會(huì)動(dòng)的圖片，這個(gè)時(shí)候我們需要用到瀏覽器的內(nèi)置對(duì)象定時(shí)器侧蘸。
對(duì)于定時(shí)器柿扣，有必要說(shuō)明一下setInterval()跟setTimeout的區(qū)別了。簡(jiǎn)單來(lái)說(shuō)闺魏，setInterval()執(zhí)行多次未状，setTimeout()只執(zhí)行一次。
更具體的用法可以點(diǎn)擊鏈接查看區(qū)別：window.setInterval? window.setTimeout 析桥。
這里我們是用setInterval()司草，因?yàn)槲覀兊膱D片需要循環(huán)滾動(dòng)。插入下面
vartimer;functionplay() {
timer= setInterval(function() {
prev.onclick()
},1500)
}
play();
運(yùn)行泡仗，ok埋虹！
但是，當(dāng)我們想仔細(xì)看某一張圖片時(shí)候娩怎，要把圖片停住搔课，我們清楚定時(shí)器就可以了，這里用到window.clearInterval這個(gè)方法截亦。
這里爬泥，我們需要對(duì)其DOM操作，需要獲取整個(gè)輪播圖區(qū)域崩瓤；
varcontainer = document.getElementById('container');functionstop() {
clearInterval(timer);
}
container.onmouseover=stop;
container.onmouseout= play;
但這里袍啡，一個(gè)輪播圖基本算完成了，有同學(xué)·會(huì)問(wèn)却桶，那么簡(jiǎn)單境输。看到圖片下面的那一排小圓點(diǎn)沒(méi)颖系。我給你加功能了嗅剖。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
這里是升級(jí)版：
varbuttons = document.getElementById('buttons').getElementsByTagName('span');varindex = 1;functionbuttonsShow() {//這里需要清除之前的樣式for(vari = 0; i < buttons.length; i++) {if(buttons[i].className == 'on') {
buttons[i].className= '';
}
}//數(shù)組從0開(kāi)始，故index需要-1buttons[index - 1].className = 'on';
}
prev.onclick=function() {
index-= 1;if(index < 1) {
index= 5;
}
buttonsShow();
animate(600);
}
next.onclick=function() {//由于上邊定時(shí)器的作用嘁扼，index會(huì)一直遞增下去信粮，我們只有5個(gè)小圓點(diǎn)，所以需要做出判斷index += 1;if(index > 5) {
index= 1;
}
buttonsShow();
animate(-600);
}
現(xiàn)在看起來(lái)正常多了吧偷拔，但我們想實(shí)現(xiàn)通過(guò)鼠標(biāo)任意點(diǎn)擊其中一個(gè)小圓點(diǎn)蒋院，切換到相應(yīng)的圖片，原理同樣莲绰，我們還是需要通過(guò)偏移量去找到對(duì)應(yīng)的圖片欺旧。
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
// 在瀏覽器的控制臺(tái)打印一下，看看結(jié)果
console.log(i);
/* 偏移量獲雀蚯：這里獲得鼠標(biāo)移動(dòng)到小圓點(diǎn)的位置辞友，用this把index綁定到對(duì)象buttons[i]上，去谷歌this的用法? */
/* 由于這里的index是自定義屬性震肮，需要用到getAttribute()這個(gè)DOM2級(jí)方法称龙，去獲取自定義index的屬性*/
var clickIndex = parseInt(this.getAttribute('index'));
var offset = 600 * (index - clickIndex);
animate(offset); //存放鼠標(biāo)點(diǎn)擊后的位置，用于小圓點(diǎn)的正常顯示
index = clickIndex;
buttonsShow();
}
}
到這一步時(shí)戳晌，以為大功告成鲫尊？你在控制臺(tái)會(huì)發(fā)現(xiàn)打印出來(lái)的永遠(yuǎn)的是i=5。
錯(cuò)誤原因：沒(méi)有正確獲取i值沦偎，使用閉包就可以了疫向。你在高級(jí)程序設(shè)計(jì)第三版中76頁(yè)，會(huì)看到這么一句話：
“對(duì)javascript來(lái)說(shuō)豪嚎，由for語(yǔ)句創(chuàng)建的變量i即使在for循環(huán)執(zhí)行結(jié)束后搔驼，也依舊會(huì)存在于循環(huán)外部的執(zhí)行環(huán)境中〕扪”
就是說(shuō)舌涨，js沒(méi)有塊級(jí)作用域這東西，（可能我C寫(xiě)多了扔字，混淆了）囊嘉。在第一次循環(huán)（從 i=0 到 4 這一過(guò)程）結(jié)束后，最后的 i 獲取到的為buttons.length的值被
保存在for循環(huán)之外革为，最后鼠標(biāo)點(diǎn)擊任何一個(gè)小圓點(diǎn)時(shí)哗伯，自然訪問(wèn)的一直是 i=5 了。
正確代碼如下：
for(vari = 0; i < buttons.length; i++) {//這里使用的是立即執(zhí)行函數(shù)篷角，(function(i) {
buttons[i].onclick=function() {varclickIndex = parseInt(this.getAttribute('index'));varoffset = 600 * (index -clickIndex);
animate(offset);
index=clickIndex;
buttonsShow();
}
})(i)
}
有關(guān)閉包的知識(shí)我不展開(kāi)來(lái)說(shuō)焊刹，要說(shuō)的又一大推，
大家可以參考下我很久之前的博客：頭疼的閉包
大家恳蹲，可能發(fā)現(xiàn)了虐块，這個(gè)輪播圖有點(diǎn)奇怪，不中規(guī)中矩嘉蕾，它是向左切換的贺奠，改寫(xiě)一下：
functionplay() {//將輪播圖換成向右切換圖片timer = setInterval(function() {
next.onclick();
},2000)? ? ? ? ? ? }
這里結(jié)合評(píng)論，補(bǔ)充下：
就算是初學(xué)者也要特別注意代碼規(guī)范問(wèn)題错忱，上面的CSS實(shí)在太不規(guī)范了儡率，難怪我?guī)У娜硕疾辉鯓庸揖荩６铡崎逃！?/p>
Css的書(shū)寫(xiě)順序
CSS里最好不用或直接不用id來(lái)改變樣式（我這里是id為了方便DOM操作）
這里推薦css規(guī)范的技術(shù)文章
前端前輩的博客：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編碼規(guī)范：http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/css-coding-style.html
over
原文轉(zhuǎn)載：http://www.cnblogs.com/LIUYANZUO/p/5679753.html
