純JS實現走馬燈

小喬流水喬發表於2018-09-21
JS

使用js實現的走馬燈功能，效果貼上程式碼瀏覽器執行下就可看到。

粗略的想了一下。其他的功能擴充套件起來也比較方便，就沒有繼續寫下去，可擴充套件點：
  1. 自動播放；
  2. 皮膚指示點；
  3. 支援多種速度的動畫效果；
  4. 圖片可配置；
  5. 監聽寬度變化

<div class="fs_0 ps_rl w_fc mg_auto">
    <div class="container ps_rl ws_nw dp_ib">
        <div class="dp_ib ps_rl"> <span class="ps_ab">4</span> <img src="https://dummyimage.com/160x100" alt=""> </div>
        <div class="dp_ib ps_rl"> <span class="ps_ab">1</span> <img src="https://dummyimage.com/160x100" alt=""> </div>
        <div class="dp_ib ps_rl"> <span class="ps_ab">2</span> <img src="https://dummyimage.com/160x100" alt=""> </div>
        <div class="dp_ib ps_rl"> <span class="ps_ab">3</span> <img src="https://dummyimage.com/160x100" alt=""> </div>
    </div>
    <div class="handlelist ps_ab">
        <div class="pre handle dp_ib" onclick="slider(-1)"></div>
        <div class="next handle dp_ib" onclick="slider(1)"></div>
    </div>
</div>


var distance = 0;
var moveStep = 0;
var progress = 0;
var canHandle = false;
var time = 300;
var container = document.getElementsByClassName('container')[0];
var list = document.getElementsByClassName('ws_nw')[0];
var width = container.offsetWidth;
var scrollX = width;
container.scrollTo(scrollX, 0);


function step() {
    progress += moveStep;
    if ((distance - progress > 0 && distance > 0) || (distance - progress < 0 && distance < 0)) {
        container.scrollTo(scrollX + progress, 0);
        requestAnimationFrame(step);
    } else {
        progress = 0;
        container.scrollTo(scrollX + distance, 0);
        canHandle = false;
    }
}


function slider(n) {
    if (canHandle) {
        return;
    }
    canHandle = true;
    distance = n * width;
    moveStep = Math.round(distance * 100 / Math.round(time / (100 / 6))) / 100;
    var i = 0;
    if (n > 0) {
        while (i < n) {
            list.appendChild(list.firstElementChild);
            i++;
        }
    } else {
        while (i < -n) {
            list.insertBefore(list.lastElementChild, list.firstElementChild);
            i++;
        }
    }
    scrollX = width * (1 - n);
    container.scrollTo(scrollX, 0);
    requestAnimationFrame(step);
}
複製程式碼


相關文章