JS: Carousel

First of all, for the functions to be implemented in the carousel, when the page is clicked, the carousel will automatically rotate, and when the mouse enters the carousel, the carousel will stop the carousel at this time. The small right-turned tab will appear and the conversion point of the page will also appear.
code show as below:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bigimg {
            width: 700px;
            height: 500px;
            background-repeat: no-repeat;
            margin: 0 auto;
            background-image: url(focus1.jpg);
            margin-top: 80px;
        }

        .left {
            position: absolute;
            background-image: url(arrow-prev.png);
            top: 50%;
            left: 25%;
            height: 50px;
            width: 50px;
            background-repeat: no-repeat;
        }

        .right {
            position: absolute;
            background-image: url(arrow-next.png);
            top: 50%;
            left: 73%;
            height: 50px;
            width: 50px;
            background-repeat: no-repeat;
        }

        ul {
            position: absolute;
            top: 75%;
            left: 41%;
            display: none;
        }

        li {
            margin-left: 40px;
            float: left;
        }
    </style>
</head>

<body>
    <div class="bigimg">
        <div class="left"></div>
        <div class="right"></div>
        <ul></ul>
    </div>
    <script>
        var bigimg = document.querySelector('.bigimg');
        var ul = document.querySelector('ul');
        var left = document.querySelector('.left');
        var right = document.querySelector('.right');
        var num = 1;
        var stop;
        //开始
        stop = setInterval(delp, 500);
        function delp() {
            if (num == 4) {
                num = 1;
            }
            bigimg.style.backgroundImage = 'url(focus' + num + '.jpg)';
            num++;
        }

        //动态生成li
        for (var i = 0; i < 3; i++) {
            var li = document.createElement('li');
            ul.appendChild(li);
        }

        var lis = ul.querySelectorAll('li');

        //当鼠标进入时，轮播停止
        bigimg.onmouseover = function () {
            clearInterval(stop);
            ul.style.display = 'block';
            left.style.display = 'block';
            right.style.display = 'block';

            //点击li会转换
            for (var i = 0; i < lis.length; i++) {
                //记录下标
                lis[i].index = i;
                lis[i].onclick = function () {//点击事件
                    var a=this.index +1;
                    bigimg.style.backgroundImage = 'url(focus' + a + '.jpg)';
                    console.log('url(focus' + a + '.jpg)');
                }
            }

            //点击向左翻事件
            left.onclick = function () {
                num -= 1;
                if (num == 0) {
                    num = 3;
                }
                console.log(num);
                var index = num - 1;
                if (index == 0) {
                    index = 3;
                }
                bigimg.style.backgroundImage = 'url(focus' + index + '.jpg)';
            }

            //点击向右翻事件
            right.onclick = function () {
                console.log(num);
                if (num == 4) {
                    num = 1;
                }
                bigimg.style.backgroundImage = 'url(focus' + num + '.jpg)';
                num++;
            }
        }

        //鼠标离开时
        bigimg.onmouseout = function () {
            stop = setInterval(delp, 500);
            ul.style.display = 'none';
            left.style.display = 'none';
            right.style.display = 'none';
        }
    </script>
</body>
</html>
Guess you like
