广告轮播图 javascript代码实现

实现一个电商页面中的广告轮流播放的框框内容 主要包括以下几个功能:
1.鼠标移入广告内出现左右点击按钮 点击按钮可左(右)查看 上(下)一个广告图片 鼠标移出广告后 点击按钮隐藏;
2.广告下方有对应广告图片个数的索引标记点,根据当前播放的图片相应索引标记点样式改变 ;
3.鼠标放在相应索引标记点可直接动画跳转到相应广告图片;
4.鼠标不经过广告内时广告自动轮流播放;
5.鼠标经过广告内广告自动播放停止.

HTML结构:

<div class="middle" id="lunfandiv">
            <ul>
                <li>
                    <a href="#"><img src="upload/focus.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="upload/focus1.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="upload/focus2.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="upload/focus3.jpg" alt=""></a>
                </li>

            </ul>
            <a href="javascript:;" class="arrow_l">
                &lt; </a>
            <a href="javascript:;" class="arrow_r">&gt;</a>
            <ol class="circle">

            </ol>
        </div>

插入的js代码:

window.addEventListener('load', function() {

    //广告轮播图
    {
        //移动动画animate函数
        function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                //用这个step可以让动画移动的速度逐渐减缓
                step = (target - obj.offsetLeft) / 10;
                //对移动步伐进行取整保证可以移动到准确位置  左移 为负 向下取整, 右移为正 向上取整
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                    if (callback) {
                        callback();
                    }
                } else {
                    obj.style.left = obj.offsetLeft + step + 'px';
                }

            }, 15);
        }


        let middlediv = document.querySelector('#lunfandiv');
        console.log(middlediv);
        let arrow_l = document.querySelector('.arrow_l');
        console.log(arrow_l);
        let arrow_r = document.querySelector('.arrow_r');
        console.log(arrow_r);

        let num = 0;
        let wait = 0;
        let ul = middlediv.querySelector('ul');
        let olcircle = document.querySelector('.circle');
        //广告轮播图超出部分隐藏
        middlediv.style.overflow = 'hidden';
        //根据广告个数生成下面选择小点的个数
        for (let i = 0; i < ul.children.length; i++) {
            let li = document.createElement('li');
            olcircle.appendChild(li);
            if (i == 0) {
                olcircle.children[i].className = 'currentwhite';
            }
            //给每个小点添加鼠标放上时候的事件
            olcircle.children[i].addEventListener('mouseenter', function() {
                //鼠标放在小点上对应小点样式改变 动画跳转到对应索引号所在的广告图片
                for (let j = 0; j < olcircle.children.length; j++) {
                    olcircle.children[j].className = 'notcurrent';

                }
                animate(ul, i * (-721));

                //把箭头的索引号和这个索引号同步
                num = i;
                olcircle.children[i].className = 'currentwhite';
            });
        }
        //把第一个图片赋值放在ul最后一个
        let newli = ul.children[0].cloneNode(true);
        ul.appendChild(newli);


        //保证按下箭头动画连续性  首先把第一张图片复制一个一样的li放在ul最后(真实的是有n+1图片 ,显示出来看着有n个图片) 
        //第一个左跳到所谓的最后一个图片  
        arrow_l.addEventListener('click', function() {

            if (num > 0) {
                num--;
                animate(ul, num * (-721));

            } else {
                //第一个左跳最后一个,跳之前先直接设置成真实的最后一张 再animate 就实现了左跳
                ul.style.left = (-4 * 721) + 'px';
                num = 3;
                animate(ul, num * (-721));
            }

            //跳的同时选择小点也跟随变化
            for (let j = 0; j < olcircle.children.length; j++) {
                olcircle.children[j].className = 'notcurrent';

            }
            olcircle.children[num].className = 'currentwhite';

            console.log(num);
        });

        //最后一个右跳 到第一个图片
        arrow_r.addEventListener('click', function() {
            //如果是在第一个图片那么再右跳之前一定要先定位到第一张图片
            if (num == 0) {
                ul.style.left = 0 + 'px';
            }
            if (num >= 3) {
                //先直接跳到真实的最后一个图片 所谓的最后一个其实是倒数第二个 然后根据下一次情况来看 如果是左跳会改变,右跳也会先判断
                animate(ul, 4 * (-721));
                num = 0;

            } else {
                num++;
                animate(ul, num * (-721));
            }
            //跳的同时选择小点也跟随变化
            for (let j = 0; j < olcircle.children.length; j++) {
                olcircle.children[j].className = 'notcurrent';
            }
            olcircle.children[num].className = 'currentwhite';
        });
        let timer = setInterval(function() {
            arrow_r.click();
        }, wait + 3000);

        //鼠标放在div上左右箭头按钮显示
        middlediv.addEventListener('mouseenter', function() {
            arrow_l.style.display = 'block';
            arrow_r.style.display = 'block';
            clearInterval(timer);
            timer = null;
        });

        //鼠标在离开div左右箭头按钮隐藏
        middlediv.addEventListener('mouseleave', function() {
            arrow_l.style.display = 'none';
            arrow_r.style.display = 'none';
            timer = setInterval(function() {
                arrow_r.click();
            }, wait + 3000);
        });
    }
});

CSS渲染内容省略 ,HTML和CSS搭建效果如下

由于动画过程上传不了 大家自行脑补或者 自己运行一下.