纯js实现无缝滑动轮播

效果如下：（点击我查看效果）

 

原理：盒子内套入一个绝对定位的盒子，改变left值，实现轮播

           滑动的核心是每轮一个元素，嵌入缓动动画

           无缝的核心是复制第一个元素放到最后，在滑动到最后一个时，迅速切换到第2个

通常滑动的小圆点也是动态生成，因为很多时候，我们拿到的数据都是动态的

1、准备html和css

 

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代码

 

菜鸟献丑，欢迎指正