js学习笔记

轮播图功能实现和关键代码分析


主要功能
1.用下面的小圆圈可以实现点击就跳转第几张图的效果
2.左右箭头在鼠标进入的时候就可以点击跳转图的操作
3.鼠标在图外时，就可以自动播放
为了实现这些功能，先了解一下轮播图的原理
其实就是将想播放的图片放在一横排，然后进行向左向右的移动，然后用overflow:hidden来做到我们只看得到盒子内的一张图片，如图：

所以轮播图的核心结构分为两个部分，一个是图片的移动，还有一个是具体功能的实现

function animate(obj, target) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 30)
}

这里是单独写了一个类来写图片移动，因为图片移动在很多地方都可以用到，如果单独写一个就可以在任何需要的地方直接添加这个类就行。

window.addEventListener('load', function () {
    var al = document.querySelector('.al');
    var ar = document.querySelector('.ar');
    var focus = document.querySelector('.pic1');
    var num = 0;

    focus.addEventListener('mouseenter', function () {
        al.style.display = 'block';
        ar.style.display = 'block';
        clearInterval(timer);
        timer = none;

    })
    focus.addEventListener('mouseleave', function () {
        al.style.display = 'none';
        ar.style.display = 'none';
        timer = setInterval(function () {
            ar.click();
        }, 2000);

    })

    //动态生成小圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('ol');
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('index', i);
        ol.appendChild(li);
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            var index = this.getAttribute('index');
            num = index;
            console.log(index);
            animate(ul, -index * 650);
        })
    }
    ol.children[0].className = 'current';

    ar.addEventListener('click', function () {
        num++;
        if (num == 4) {
            ul.style.left = 0;
            num = 0;
        }
        animate(ul, -num * 650);
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[num].className = 'current';
    })
    al.addEventListener('click', function () {
        num--;
        if (num == -1) {
            ul.style.left = -3 * 650 + 'px';
            num = 3;
        }
        animate(ul, -num * 650);
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[num].className = 'current';
    })
    var timer = setInterval(function () {
        ar.click();
    }, 2000);

})

上面有一个点就是，动态生成小圆点，这样就可以在添加图片时，下面的原点进行自动增减。