JS:轮播图

首先对于轮播图要实现的功能，当点进页面时，轮播图会自动轮播，当鼠标进入轮播图时，轮播图会停止轮播此时的轮播图上的向左向右翻的的小标签会出现且页面的转换点也会出现。
代码如下：
<!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>
猜你喜欢
