JavaScript实现简单轮播图动画

运行效果：
源代码:
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px
    }

    #container {
        margin: 30px auto;
        width: 1280px;
        height: 720px;
        position: relative;
        overflow: hidden;
    }

    #inner-list {
        width: 400%;
        position: absolute;
        top: 0;
        left: 0;
    }

    #inner-list li {
        float: left;
    }

    #dot-list {
        position: absolute;
        bottom: 20px;
        right: 20px;

    }

    #dot-list li {
        float: left;
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        line-height: 20px;
        text-align: center;
        background: rgba(255, 255, 255, .3);
        cursor: pointer;
        margin-right: 10px;
    }

    #dot-list li.cur {
        background: rgba(255, 255, 255, .6);
    }

    .btn-ctrl {
        position: absolute;
        cursor: pointer;
        top: 50%;
        font-size: 36px;
        color: red;
        font-weight: 500;
        z-index: 2;
    }

    #btn-prev {
        left: 0px;
    }

    #btn-next {
        right: 0px;
    }
</style>
<body>
<div class="container" id="container">
    <div id="btn-prev" class="btn-ctrl">&lt;</div>
    <div id="btn-next" class="btn-ctrl">&gt;</div>
    <ul id="inner-list">
        <li><img src="https://w.wallhaven.cc/full/nz/wallhaven-nzy6g4.jpg" alt=""/></li>
        <li><img src="https://w.wallhaven.cc/full/0w/wallhaven-0w6z64.jpg" alt=""/></li>
        <li><img src="https://w.wallhaven.cc/full/42/wallhaven-421zm0.jpg" alt=""/></li>
    </ul>
    <ul id="dot-list"></ul>
</div>

<script type="text/javascript">
    window.onload = function () {
        var eleInners = document.getElementById('inner-list'),
            eleDots = document.getElementById('dot-list'),
            liImgs = eleInners.getElementsByTagName('li'),
            liDots = eleDots.children,
            elePrev = document.getElementById('btn-prev'),
            eleNext = document.getElementById('btn-next'),
            LI_WIDTH = liImgs[0].offsetWidth,
            TIME_DURATION = 3000,
            interval = null,
            index = 0,
            circle = 0;
        //首先是克隆
        eleInners.appendChild(liImgs[0].cloneNode(true));
        //生成小点点
        for (var i = 0, len = liImgs.length - 1; i < len; i++) {
            var li = document.createElement('li');
            li.innerHTML = i + 1;
            eleDots.appendChild(li);
        }
        //第一个点高亮
        liDots[0].className = 'cur';

        //接着是动画，用差值和offsetLeft值和移动的值，给一个speed让它移动
        function animate(obj, targetPlace) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                //判断移动的位置是向左移动还是向右移动
                var speed = obj.offsetLeft > targetPlace ? -15 : 15;
                var result = targetPlace - obj.offsetLeft;
                //只要移动的差值大于speed，那么就一直让obj.style.left 改变
                if (Math.abs(result) > Math.abs(speed)) {
                    obj.style.left = obj.offsetLeft + speed + 'px'
                } else {
                    //否则如果已经移动的，obj.offsetleft与要移动的位置十分接近了，
                    obj.style.left = targetPlace + 'px';
                    clearInterval(obj.timer);
                }
            }, 10)

        }

        //接着定时器
        interval = setInterval(autoplay, 5000);

        //向左的autoplay
        function autoplay() {
            index++;
            if (index > liImgs.length - 1) {
                eleInners.style.left = 0;//赶快跳回去
                index = 1;//找到第二张图片
            }
            animate(eleInners, -index * LI_WIDTH);
            circle++;

            if (circle >= liImgs.length - 1) {
                circle = 0;//circle回到第一个点
            }
            for (var i = 0, len = liDots.length; i < len; i++) {
                liDots[i].className = '';

            }
            liDots[circle].className = 'cur';
        }

        //向右移动
        function moveright() {
            index--;
            if (index < 0) {
                eleInners.style.left = -(liImgs.length - 2) * LI_WIDTH + 'px';
                index = liImgs.length - 2;//找到倒数第二张图片
            }
            animate(eleInners, -index * LI_WIDTH);
            circle--;
            if (circle < 0) {
                circle = liImgs.length - 2;//circle回到最后一个点
            }
            for (var i = 0, len = liDots.length; i < len; i++) {
                liDots[i].className = '';
            }
            liDots[circle].className = 'cur';
        }

//        鼠标移入，清除定时器
        eleInners.addEventListener('mouseenter', function (event) {
            clearInterval(interval);
        });
        //        鼠标移出，开启定时器
        eleInners.addEventListener('mouseleave', function (event) {
            interval = setInterval(autoplay, 5000);
        });
//        点击dots
        eleDots.addEventListener('click', function (event) {
            clearInterval(interval);
            var target = event.target;
            var currentTarget = event.currentTarget;
            index = target.innerHTML - 0 - 1;
            circle = index;
            for (var i = 0, len = liDots.length; i < len; i++) {
                liDots[i].className = '';
            }
            liDots[circle].className = 'cur'
            animate(eleInners, -index * LI_WIDTH);
        });
        elePrev.addEventListener('click', function (event) {
            clearInterval(interval);
            moveright();
            interval = setInterval(autoplay, 5000)
        });
        eleNext.addEventListener('click', function (event) {
            clearInterval(interval);
            autoplay();
            interval = setInterval(autoplay, 5000);
        });
    }
</script>
</body>
</html>
JavaScript实现简单轮播图动画

猜你喜欢
