app ios 轮播图 轮播图效果

轮播图也称为焦点图，是网页中比较常见的网页特效。

功能需求：

1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。

2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。

3.图片播放的同时，下面小圆圈模块跟随一起变化。

4.点击小圆圈，可以播放相应图片。

5.鼠标不经过轮播图，轮播图也会自动播放图片。

6.鼠标经过，轮播图模块， 自动播放停止。

window.addEventListener('load', function() {
    // 1. 获取元素
    var arrow_l = document.querySelector('.arrow_l')
    var arrow_r = document.querySelector('.arrow_r')
    var mainbox_l = document.querySelector('.mainbox_l')
    var mainbox_l_width = mainbox_l.offsetWidth;

    var num = 0;
    var circle = 0;
    // 定义节流阀
    var flag = true;
    // 2.给盒子添加事件:鼠标经过盒子,左右箭头盒子显示出来
    mainbox_l.addEventListener('mouseenter', function() {
            clearInterval(timer);
            // 清除定时器变量
            timer = null;
            arrow_l.style.display = 'block';
            arrow_r.style.display = 'block';
        })
        // 3.给盒子添加事件:鼠标离开盒子,左右箭头盒子隐藏
    mainbox_l.addEventListener('mouseleave', function() {
            arrow_l.style.display = 'none';
            arrow_r.style.display = 'none';
            timer = setInterval(function() {
                //手动调用点击事件
                arrow_r.click();
            }, 2000)

        })
        // 4.自动生成小圆圈circle
    var ul = mainbox_l.querySelector('ul')
    var ol = mainbox_l.querySelector('ol')
    for (var i = 0; i < ul.children.length; i++) {
        li = document.createElement('li');
        // 需要给li设置属性index后面方便调用
        li.setAttribute('index', i);
        ol.appendChild(li);
        // 给li鼠标设置一个经过,图片跳转的效果
        li.addEventListener('mouseenter', function() {
            // 先排他,实现小圆圈本身效果
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            var index = this.getAttribute('index');
            // 当我们点击了某个小li 就要把这个li 的索引号给 num  
            num = index;
            // 当我们点击了某个小li 就要把这个li 的索引号给 circle  
            circle = index;
            // 5.实现ul图片移动效果
            animate(ul, -mainbox_l_width * index)
        })
    }
    // 给第一个小圆圈设置默认选中属性
    ol.children[0].className = 'current';
    // 6. 克隆第一张图片(li)放到ul 最后面，注意是深拷贝
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 7. 点击右侧按钮， 图片滚动一张
    arrow_r.addEventListener('click', function() {
        if (flag) {
            flag = false; // 关闭节流阀
            // 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * mainbox_l_width, function() {
                    flag = true;
                })
                // 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
            circle++;
            if (circle == ol.children.length) {
                circle = 0;
            }
            circlechange()
        }
    })

    // 左侧按钮做法:
    arrow_l.addEventListener('click', function() {
        if (flag) {
            flag = false;
            // 首先让图片滚动起来
            if (num == 0) {
                ul.style.left = (ul.children.length - 1) * mainbox_l_width;
                num = ul.children.length - 1;
            }
            num--;
            animate(ul, -num * mainbox_l_width, function() {
                flag = true;
            })
            circle--;
            circle = circle < 0 ? ol.children.length - 1 : circle;
            circlechange();
        }
    })
    var timer = this.setInterval(function() {
        arrow_r.click();
    }, 2000)

    function circlechange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    }
})

function animate(obj, target, callback) {
    // 需要先清除定时器，防止连续点击速度变快
    clearInterval(obj.timer)
    obj.timer = setInterval(function() {
        if (obj.offsetLeft == target) {
            // 当到达目标距离时，就要清除定时器
            clearInterval(obj.timer);
            callback && callback();
        } else {
            // 计算步长,每次移动距离慢慢变小,速度慢慢落下来.核心算法:(目标值-现在位置)/10
            var step = (target - obj.offsetLeft) / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            // 注意需要添加else语句，直接写会导致点击时即使到达目标位置还会动
            obj.style.left = obj.offsetLeft + step + 'px';
        }
    }, 15)
}