原生--姬艾斯——电脑端轮播图纯手写，原生--姬艾斯

本文链接：https://blog.csdn.net/zuoyou9461/article/details/123810531

//html部分

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/animate.js"></script>
    <script src="js/lunbo.js"></script>
    <link rel="stylesheet" href="css/lunbo.css">
    <title>Document</title>
</head>

<body>
    <div class="banner">

        <a href="javascript:;" class="prev"></a>
        <a href="javascript:;" class="next"></a>
        <ol>

        </ol>
        <ul>
            <li>
                <a href=""><img src="images/R-C (1).jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/R-C (3).jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/R-C.jpg" alt=""></a>
            </li>

        </ul>
    </div>
</body>

</html>

//css样式部分

ol,
ul,
a {
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

.banner {
    width: 1200px;
    height: 600px;
    margin: 100px auto;
    background: #ddd;
    position: relative;
    overflow: hidden;
}

.banner .prev {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 99;
    background: rgba(240, 240, 240, 0.7) url(../images/you.png)no-repeat 50% 50%;
    border-radius: 80px;
    background-size: 78%;
    display: none;
}

.banner .next {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 1160px;
    z-index: 99;
    background: #666;
    background: rgba(240, 240, 240, 0.7) url(../images/zuo.png)no-repeat 50% 50%;
    border-radius: 80px;
    background-size: 78%;
    display: none;
}

.banner ol {
    width: 50%;
    height: 30px;
    position: absolute;
    top: 90%;
    left: 42%;
    z-index: 99;
}

.banner ol li {
    width: 15px;
    height: 15px;
    border-radius: 16px;
    border: 1px solid #fff;
    float: left;
    margin: 8px 12px;
}

.banner ol .circle {
    background: #fff;
}

.banner ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 400%;
}

.banner ul li {
    float: right;
}

.banner ul li a img {
    width: 1200px;
    height: 600px;
}

//js部分没有用框架喝插件，原生手动

window.addEventListener('load', function() {
    //左右按钮显示隐藏
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');
    var banner = document.querySelector('.banner');
    var bannerWidth = banner.offsetWidth;
    banner.addEventListener('mouseenter', function() {
        prev.style.display = 'block';
        next.style.display = 'block';
    })
    banner.addEventListener('mouseleave', function() {
            prev.style.display = 'none';
            next.style.display = 'none';
        })
        //动态生成小圆点
    var ul = banner.querySelector('ul');
    var ol = banner.querySelector('ol');
    // console.log(ul.children.length);
    for (i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        //记录小圆圈的索引号，通过自定义属性
        li.setAttribute('index', i);
        //把小li插入到ol
        ol.appendChild(li);
        //小圆圈排他思想
        li.addEventListener('click', function() {
            //清除其他li的类名
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'circle';
            //点击小圆点移动图片 ul移动
            //ul 的移动距离 小圆圈的索引号 乘以图片宽度 注意是负值
            //当我们点击了某个小li  就拿到当前小li 的索引号
            var index = this.getAttribute('index');
            num = index;
            circle = index;
            animate(ul, -index * bannerWidth);

        })
    }
    //给ol第一个li替换背景色
    ol.children[0].className = 'circle';
    //克隆第一张图片放到ul最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    //点击按钮一次，图片滚动一张
    var num = 0;
    //控制小圆圈的播放
    var circle = 0;
    //节流阀
    var flag = true;
    next.addEventListener('click', function() {
        if (flag) {
            flag = false; //关闭节流阀
            //最后一张，复位
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * bannerWidth, function() {
                flag = true;
            });
            circle++;
            if (circle == ol.children.length) {
                circle = 0;
            }
            circleChange();
        }
    });

    prev.addEventListener('click', function() {
        if (flag) {
            flag = false;
            //最后一张，复位
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = num * bannerWidth + 'px';

            }
            num--;
            animate(ul, -num * bannerWidth, function() {
                flag = true;
            });
            circle--;
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            //circle = circle < 0 ? ol.children.length - 1:circle;  三元运算符简写
            circleChange();
        }
    });

    function circleChange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'circle';
    }
    //自动播放
    var timer = setInterval(function() {
        //手动调用点击事件
        prev.click();
    }, 2000);

})