前端學(xué)習(xí)時間不長，最近看完了第一遍高設(shè)，想著試著寫一點東西，于是有了這個還不算好的輪播效果。（學(xué)習(xí)出處為慕課網(wǎng)）

實現(xiàn)過程

首先，應(yīng)該清楚將要實現(xiàn)的功能，我實現(xiàn)的功能主要為：

• 鼠標(biāo)滑過圖片時左右兩邊的箭頭出現(xiàn)，并且鼠標(biāo)放在箭頭上時箭頭透明度降低
• 點擊左右箭頭實現(xiàn)圖片無限輪播
• 圖片下方圓點按鈕會隨著圖片輪播而變化
• 點擊任意圓點按鈕，圖片能正確定位到相關(guān)位置
• 鼠標(biāo)移出圖片時，圖片按照一定時間間隔自動輪播，鼠標(biāo)放入圖片時，暫停自動播放

接下來就是實現(xiàn)各個功能：
1、鼠標(biāo)滑過效果
鼠標(biāo)滑過效果可以直接通過偽類選擇符hover實現(xiàn)

.arrow{
    cursor: pointer;//鼠標(biāo)放入箭頭時顯示為小手的形狀
    display: none;//鼠標(biāo)未滑入圖片時，不顯示效果
        line-height: 40px;text-align: center;font-size: 36px;font-weight: bold;width: 40px;height: 40px;
    position: absolute;//說明以父容器為定位基準(zhǔn)
    z-index: 2;//此標(biāo)簽說明本部分與其他部分相比更靠近人
    top: 180px;background-color:#000;
    opacity: 0.3; //設(shè)置箭頭出現(xiàn)的透明度
    color:#fff;
}

在鼠標(biāo)滑過箭頭時只需要改變箭頭的透明度

.arrow:hover{
    opacity: 0.7;
}

由于之前定義了display: none;，所以現(xiàn)在要將其顯示出來

#carousel:hover .arrow{
    display: block;
}

2、點擊箭頭實現(xiàn)輪播
通過觀察控制臺可以發(fā)現(xiàn)，在進(jìn)行圖片輪播時，改變的其實是圖片left:00px的值，也就是說只要能有一個函數(shù)，在鼠標(biāo)點擊箭頭時準(zhǔn)備定位此時圖片的left值，就能實現(xiàn)圖片的切換。

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);//點擊左箭頭
}

但是上述方法不能實現(xiàn)無限滾動的效果，也就是說鼠標(biāo)一直往一個方向點擊時，會出現(xiàn)空白頁，所以進(jìn)行以下優(yōu)化：
在圖片輪播到第一張后再次點擊箭頭，圖片的left值將會變大，也就是說如果想要從第一張?zhí)D(zhuǎn)到最后一張，可以加上最后一張的附屬圖，并將它的left值變?yōu)樽詈笠粡垐D的left值，從而實現(xiàn)跳轉(zhuǎn)。

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、點擊圓點按鈕實現(xiàn)圖片切換
每一個按鈕都設(shè)置了一個index值，用來顯示圖片序號。首先要實現(xiàn)圓點點亮功能。
在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';//將當(dāng)前按鈕變?yōu)榱林?}
prev.onclick=function(){
    if (index == 1) {//如果沒有此判斷，index值將會一直減小，如果當(dāng)前index為1，說明是第一個按鈕，下一個按鈕的index值為5
        index = 5;
    }
    else{
        index -= 1;
    }
    showbutton();
    animate(600);
}

現(xiàn)在要實現(xiàn)圓點按鈕的任意切換，此時圖片切換的原理與上述箭頭切換一樣，都是通過偏移量來進(jìn)行切換，此時是通過index的值進(jìn)行切換。

for (var i = 0; i < button.length; i++) {
     button[i].onclick = function(){
        if (this.className == 'on') {
            return;//跳出函數(shù)，當(dāng)點擊當(dāng)前頁面的按鈕時，不進(jìn)行for循環(huán)
        }
        var newindex = parseInt(this.getAttribute('index'));//獲取目標(biāo)值
        var offset = -600 * (newindex - index);
        animate(offset);
        index = newindex;
        showbutton();//點擊后需要顯示按鈕
        }

4、設(shè)置圖片切換速度，CSS3有一個過渡屬性transition屬性，但這個屬性不能用在這里，試過之后可以發(fā)現(xiàn)圖片切換的順序?qū)嶋H上是123454321，而我們要的效果是1234512345，所以這里需要使用js。本效果使用setTimeout()方法來實現(xiàn)，每隔10ms,執(zhí)行一次go()。

function animate(offset){
    if(offset == 0){
        return;
    }
    animated = true;
    var time =300;
    var interval = 10;//圖片切換一下的時間
    var speed = offset/(time/interval);//設(shè)置圖片的切換速度
    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、實現(xiàn)自動切換
自動切換使用了定時器，在一個時間間隔里，執(zhí)行點擊右箭頭的方法。

function play(){
            var timer = setTimeout(function(){
                    next.onclick();
                    play();
                },interval);
            }

在鼠標(biāo)放在圖片上時，自動切換暫停，因此需要清楚定時器。

function stop(){
                clearTimeout(timer);
            }

最后通過以下方式，實現(xiàn)此功能：

carousel.onmouseover = stop;
  carousel.onmouseout = play;
  play();

學(xué)習(xí)心得

雖然成功實現(xiàn)了輪播效果，但是在代碼優(yōu)化上還有很多需要改進(jìn)的地方。目前還處于前端小白階段，希望在接下來的學(xué)習(xí)中能有所提高。
（本文可能存在很多漏洞，希望眾大神能批評指出，感謝！）
個人主頁