前端學習時間不長，最近看完了第一遍高設，想著試著寫一點東西，于是有了這個還不算好的輪播效果。（學習出處為慕課網）
實現過程
首先，應該清楚將要實現的功能，我實現的功能主要為：
- 鼠標滑過圖片時左右兩邊的箭頭出現，并且鼠標放在箭頭上時箭頭透明度降低
- 點擊左右箭頭實現圖片無限輪播
- 圖片下方圓點按鈕會隨著圖片輪播而變化
- 點擊任意圓點按鈕，圖片能正確定位到相關位置
- 鼠標移出圖片時，圖片按照一定時間間隔自動輪播，鼠標放入圖片時，暫停自動播放
接下來就是實現各個功能：
1、鼠標滑過效果
鼠標滑過效果可以直接通過偽類選擇符hover實現
.arrow{
cursor: pointer;//鼠標放入箭頭時顯示為小手的形狀
display: none;//鼠標未滑入圖片時，不顯示效果
line-height: 40px;text-align: center;font-size: 36px;font-weight: bold;width: 40px;height: 40px;
position: absolute;//說明以父容器為定位基準
z-index: 2;//此標簽說明本部分與其他部分相比更靠近人
top: 180px;background-color:#000;
opacity: 0.3; //設置箭頭出現的透明度
color:#fff;
}
在鼠標滑過箭頭時只需要改變箭頭的透明度
.arrow:hover{
opacity: 0.7;
}
由于之前定義了display: none;，所以現在要將其顯示出來
#carousel:hover .arrow{
display: block;
}
2、點擊箭頭實現輪播
通過觀察控制臺可以發現，在進行圖片輪播時，改變的其實是圖片left:00px的值，也就是說只要能有一個函數，在鼠標點擊箭頭時準備定位此時圖片的left值，就能實現圖片的切換。
function animate(offset){
var left = parseInt(picture.style.left) + offset;
picture.style.left = left + 'px';
}
next.onclick = function() {
animate(-600px);//點擊右箭頭
}
prev.onclick = function() {
animate(600px);//點擊左箭頭
}
但是上述方法不能實現無限滾動的效果，也就是說鼠標一直往一個方向點擊時，會出現空白頁，所以進行以下優化：
在圖片輪播到第一張后再次點擊箭頭，圖片的left值將會變大，也就是說如果想要從第一張跳轉到最后一張，可以加上最后一張的附屬圖，并將它的left值變為最后一張圖的left值，從而實現跳轉。
function animate(offset){
var left = parseInt(picture.style.left) + offset;
if (left >-600) {
picture.style.left = -3000 + 'px';
}
if (left <-3000) {
picture.style.left = -600 + 'px';
}
}
3、點擊圓點按鈕實現圖片切換
每一個按鈕都設置了一個index值，用來顯示圖片序號。首先要實現圓點點亮功能。
在css定義了一個圓點亮起的效果：
#button .on{
background: #fff;
}
定義一個方法來點亮圓點：
function showbutton(){
for (var i = 0; i<button.length; i++) {//遍歷圓點
if (button[i].className == 'on') {//如果遍歷到的圓點亮著，則去掉，防止圓點一起亮起
button[i].className='';
break;
}
}
button[index-1].className='on';//將當前按鈕變為亮著
}
prev.onclick=function(){
if (index == 1) {//如果沒有此判斷，index值將會一直減小，如果當前index為1，說明是第一個按鈕，下一個按鈕的index值為5
index = 5;
}
else{
index -= 1;
}
showbutton();
animate(600);
}
現在要實現圓點按鈕的任意切換，此時圖片切換的原理與上述箭頭切換一樣，都是通過偏移量來進行切換，此時是通過index的值進行切換。
for (var i = 0; i < button.length; i++) {
button[i].onclick = function(){
if (this.className == 'on') {
return;//跳出函數，當點擊當前頁面的按鈕時，不進行for循環
}
var newindex = parseInt(this.getAttribute('index'));//獲取目標值
var offset = -600 * (newindex - index);
animate(offset);
index = newindex;
showbutton();//點擊后需要顯示按鈕
}
4、設置圖片切換速度，CSS3有一個過渡屬性transition屬性，但這個屬性不能用在這里，試過之后可以發現圖片切換的順序實際上是123454321，而我們要的效果是1234512345，所以這里需要使用js。本效果使用setTimeout()方法來實現，每隔10ms,執行一次go()。
function animate(offset){
if(offset == 0){
return;
}
animated = true;
var time =300;
var interval = 10;//圖片切換一下的時間
var speed = offset/(time/interval);//設置圖片的切換速度
var left = parseInt(picture.style.left) + offset;
var go = function(){
if ((speed > 0 && parseInt(picture.style.left) < left) || (speed < 0 && parseInt(picture.style.left) > left)) {
picture.style.left = parseInt(picture.style.left) + speed +'px';
setTimeout(go,interval);
}
else{
picture.style.left = left +'px';
if(left>-200){
picture.style.left = -600 * len + 'px';
}
if (left<(-600 *len)) {
picture.style.left = '-600px';
}
animated = false;
}
}
go();
}
5、實現自動切換
自動切換使用了定時器，在一個時間間隔里，執行點擊右箭頭的方法。
function play(){
var timer = setTimeout(function(){
next.onclick();
play();
},interval);
}
在鼠標放在圖片上時，自動切換暫停，因此需要清楚定時器。
function stop(){
clearTimeout(timer);
}
最后通過以下方式，實現此功能：
carousel.onmouseover = stop;
carousel.onmouseout = play;
play();
學習心得
雖然成功實現了輪播效果，但是在代碼優化上還有很多需要改進的地方。目前還處于前端小白階段，希望在接下來的學習中能有所提高。
（本文可能存在很多漏洞，希望眾大神能批評指出，感謝！）
個人主頁
