<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .focus {
            width: 590px;
            height: 470px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        a {
            text-decoration: none;
        }

        li {
            float: left;
            list-style: none;
        }

        ul {
            width: 700%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .arrow-l,
        .arrow-r {
            display: none;
            width: 30px;
            background-color: rgba(255, 255, 255, 0.3);
            z-index: 2;
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            font-size: 30px;
            line-height: 50px;
            text-align: center;
            color: #fff;
        }

        .arrow-l {
            left: 0;
        }

        .arrow-r {
            right: 0;
        }

        .pointer {
            position: absolute;
            left: 20px;
            bottom: 30px;
        }

        .pointer li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.3);
            margin-left: 3px;
            border: 2px solid transparent;
            background-clip: content-box;
            z-index: 999;
        }

        .pointer .active,
        .pointer li:hover {
            background-color: #fff;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }
    </style>
</head>

<body>
    <div class="focus">
        <a href="javascript:;" class="arrow-l">&lt;</a>
        <a href="javascript:;" class="arrow-r">&gt;</a>
        <ul>
            <li><a href="javascript:;"><img src="./images/q.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="./images/q (1).jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="./images/q (2).jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="./images/q (3).jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="./images/q (4).jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="./images/q (5).jpg" alt=""></a></li>
        </ul>
        <ol class="pointer"></ol>
    </div>
    <script>
        var arrowR = document.querySelector('.arrow-r');
        var arrowL = document.querySelector('.arrow-l');
        var focus = document.querySelector('.focus');
        var focusWidth = focus.offsetWidth;
        focus.addEventListener('mouseenter', function () {
            arrowR.style.display = 'block';
            arrowL.style.display = 'block';
            clearInterval(timer);
            timer = null;
        })
        focus.addEventListener('mouseleave', function () {
            arrowR.style.display = '';
            arrowL.style.display = '';
            timer = setInterval(function () {
                arrowR.click();
            }, 2000);
        })
        function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (step == 0) {
                    clearInterval(obj.timer);
                    callback && callback();
                }
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 30);
        }
        var ul = document.querySelector('ul');
        var ol = document.querySelector('ol');
        var num = 0;
        var circle = 0;
        var flag = true;
        for (var i = 0; i < ul.children.length; i++) {
            var li = document.createElement('li');
            li.setAttribute('data-index', i);
            ol.appendChild(li);
            li.addEventListener('click', function () {
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                this.className = 'active';
                var index = this.getAttribute('data-index');
                num = index;
                circle = index;
                animate(ul, -index * focusWidth);
            })
            ol.children[0].className = 'active';
        }
        var first = ul.children[0].cloneNode(true);
        ul.appendChild(first);
        arrowR.addEventListener('click', function () {
            if (flag) {
                flag = false;
                if (num == ul.children.length - 1) {
                    num = 0;
                    ul.style.left = 0;
                }
                num++;
                animate(ul, -num * focusWidth, function () {
                    flag = true;
                });
                circle++;
                if (circle == ol.children.length) {
                    circle = 0;
                }
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                ol.children[circle].className = 'active';
            }
        })
        arrowL.addEventListener('click', function () {
            if (flag) {
                flag = false;
                if (num == 0) {
                    num = ul.children.length - 1;
                    ul.style.left = -num * focusWidth + 'px';
                }
                num--;
                animate(ul, -num * focusWidth, function () {
                    flag = true;
                });
                circle--;
                if (circle < 0) {
                    circle = ol.children.length - 1;
                }
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                ol.children[circle].className = 'active';
            }
        })
        var timer = setInterval(function () {
            arrowR.click();
        }, 2000);
    </script>
</body>

</html>