淘先锋技术网

首页 1 2 3 4 5 6 7

纯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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><img src="img/l1.jpg" alt=""></a></li>
            <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><img src="img/l2.jpg" alt=""></a></li>
            <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><img src="img/l3.jpg" alt=""></a></li>
            <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><img src="img/l4.jpg" alt=""></a></li>
            <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><img src="img/l5.jpg" alt=""></a></li>
            <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><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>

菜鸟献丑，欢迎指正