純js實現無縫滑動輪播

原理：盒子內套入一個絕對定位的盒子，改變left值，實現輪播

    滑動的核心是每輪一個元素，嵌入緩動動畫

    無縫的核心是複製第一個元素放到最後，在滑動到最後一個時，迅速切換到第2個

通常滑動的小圓點也是動態生成，因爲很多時候，我們拿到的數據都是動態的

1、準備html和css

<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul, li, ol {
        list-style: none;
    }

    .slider {
        width: 590px;
        height: 470px;
        border: 1px solid #eee;
        margin: 100px auto;
        padding: 5px;
        position: relative;
    }

    .inner {
        width: 100%;
        height: 100%;
        background: pink;
        position: relative;
        overflow: hidden;
    }

    .inner img {
        display: block;
    }

    .inner ul {
        width: 800%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .inner li {
        float: left;
    }

    .slider ol {
        position: absolute;
        left: 50%;
        margin-left: -80px;
        bottom: 10px;
    }

    .slider ol li {
        float: left;
        width: 18px;
        height: 18px;
        background: #fff;
        margin-right: 10px;
        text-align: center;
        line-height: 18px;
    }

    .slider ol li.current {
        background: coral;
        cursor: pointer;
    }
</style>

<div class="slider" id="slider">
    <div class="inner">
        <ul>
            <li><a href="#"><img src="img/l1.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/l2.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/l3.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/l4.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/l5.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/l6.jpg" alt=""></a></li>
        </ul>
    </div>
</div>

2、準備緩動動畫函數

// 緩動動畫函數
var leader = 0;//緩動動畫變量
function animate(obj, target) {
    clearInterval(obj.timer); // 清除定時器
    /*定時任務，緩動輪播 30毫秒到target位置*/
    obj.timer = setInterval(function () {
        leader = leader + (target - leader) / 10;//緩動動畫公式
        obj.style.left = leader + "px";
    }, 10);
}

3、動態複製第一個元素放到最後

// 1、動態複製最後一張圖
ul.appendChild(ullis[0].cloneNode(true));

4、動態生成小圓點

// 2、動態生成小圓點
var ol = document.createElement("ol");
slider.appendChild(ol);
for (var i = 0; i < ullis.length - 1; i++) {
    var li = document.createElement("li");
    li.innerHTML = i + 1;
    ol.appendChild(li);
}
ol.children[0].setAttribute("class", "current");

5、鼠標經過小圓點時，切換圓點樣式

// 3、鼠標經過小圓點  圓點事件
var ollis = ol.children;
for (var i = 0; i < ollis.length; i++) {
    ollis[i].index = i; // 自定義屬性
    ollis[i].onmouseover = function () {
        for (var j = 0; j < ollis.length; j++) { // 去掉所有小圓點的class
            ollis[j].removeAttribute("class");
        }
        ollis[this.index].setAttribute("class", "current"); // 保留當前小圓點的class

        // 圖片動畫
        animate(ul, -this.index * ullis[0].offsetWidth);

        key = point = this.index; // 從當前開始動畫
    }
}

6、輪播的核心，定時器

// 4、輪播圖定時器
var timer = null;
timer = setInterval(autoplay, 3000);
var key = 0; // 控制播放張數
var point = 0; // 控制小圓點
function autoplay() {
    // 播放張數
    key++;
    if (key > ullis.length - 1) { // 判斷是否播放完
        leader = 0; // 迅速跳回
        key = 1; // 下次播放第二張
    }
    animate(ul, -key * ullis[0].offsetWidth);

    // 小圓點
    point++;
    if (point > ollis.length - 1) {
        point = 0;
    }
    for (var i = 0; i < ollis.length; i++) { // 先清除所有的
        ollis[i].removeAttribute("class");
    }
    ollis[point].setAttribute("class", "current") // 再保留現在的
}

7、最後，貼上所有js代碼

<script>
    // 獲得元素
    var slider = document.getElementById("slider");
    var ul = slider.children[0].children[0];
    var ullis = ul.children;

    // 1、動態複製最後一張圖
    ul.appendChild(ullis[0].cloneNode(true));

    // 2、動態生成小圓點
    var ol = document.createElement("ol");
    slider.appendChild(ol);
    for (var i = 0; i < ullis.length - 1; i++) {
        var li = document.createElement("li");
        li.innerHTML = i + 1;
        ol.appendChild(li);
    }
    ol.children[0].setAttribute("class", "current");

    // 3、鼠標經過小圓點  圓點事件
    var ollis = ol.children;
    for (var i = 0; i < ollis.length; i++) {
        ollis[i].index = i; // 自定義屬性
        ollis[i].onmouseover = function () {
            for (var j = 0; j < ollis.length; j++) { // 去掉所有小圓點的class
                ollis[j].removeAttribute("class");
            }
            ollis[this.index].setAttribute("class", "current"); // 保留當前小圓點的class

            // 圖片動畫
            animate(ul, -this.index * ullis[0].offsetWidth);

            key = point = this.index; // 從當前開始動畫
        }
    }

    // 緩動動畫函數
    var leader = 0;//緩動動畫變量
    function animate(obj, target) {
        clearInterval(obj.timer); // 清除定時器
        /*定時任務，緩動輪播 30毫秒到target位置*/
        obj.timer = setInterval(function () {
            leader = leader + (target - leader) / 10;//緩動動畫公式
            obj.style.left = leader + "px";
        }, 10);
    }

    // 4、輪播圖定時器
    var timer = null;
    timer = setInterval(autoplay, 3000);
    var key = 0; // 控制播放張數
    var point = 0; // 控制小圓點
    function autoplay() {
        // 播放張數
        key++;
        if (key > ullis.length - 1) { // 判斷是否播放完
            leader = 0; // 迅速跳回
            key = 1; // 下次播放第二張
        }
        animate(ul, -key * ullis[0].offsetWidth);

        // 小圓點
        point++;
        if (point > ollis.length - 1) {
            point = 0;
        }
        for (var i = 0; i < ollis.length; i++) { // 先清除所有的
            ollis[i].removeAttribute("class");
        }
        ollis[point].setAttribute("class", "current") // 再保留現在的
    }

    // 5、鼠標經過事件
    slider.onmouseover = function () {
        clearInterval(timer);
    }
    slider.onmouseout = function () {
        timer = setInterval(autoplay, 3000);
    }
</script>

效果如圖

菜鳥獻醜，歡迎指正