JavaScript—原生轮播和无缝滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        #banber {
            border: #e74c3c 1px solid;
            margin: 100px;
             800px;
            height: 480px;
            position: relative;
            overflow: hidden;
        }

        #banber span:last-child {
            left: 780px;
        }

        #banber span {
            background: #999999;
            font-size: 26px;
            color: #ffffff;
             20px;
            height: 40px;
            opacity: 0.7;
            position: absolute;
            top: 220px;
        }

        #banber ul {
             6000px;
            position: absolute;
        }

        #banber ul li {
             800px;
            height: 480px;
            float: left;
        }

        #list {
            position: absolute;
            background-color: #cccccc;
            left: 580px;
            top: 420px;
            height: 10px;
            opacity: 0.7;
            padding: 2px 50px 2px 0px;

        }

        #list a {
            float: left;
            background-color: #f23d9c;
            border-radius: 50%;
             10px;
            height: 10px;
            margin-left: 8px;
        }

    </style>
    <script src="animte.js"></script>

</head>
<body>

<div id="banber">
    <ul>
        <li><img src="images/CJD2.jpg" alt=""></li>
        <li><img src="images/CJD1.jpg" alt=""></li>
        <li><img src="images/CJD3.jpg" alt=""></li>
        <li><img src="images/CJD4.jpg" alt=""></li>
        <li><img src="images/CJD5.jpg" alt=""></li>
    </ul>
    <div id="arrol">
        <span><</span>
        <span>> </span>
    </div>

    <div id="list">

    </div>
</div>
<script>
    const banaer = document.getElementById('banber')
    const arrol = document.getElementById('arrol')
    const list = document.getElementById('list')
    let index = 0
    //1,动态生成小圆球
    //获取ul
    const b_ul = banaer.getElementsByTagName('ul')[0];
    //获取LI的长度
    const len = b_ul.getElementsByTagName('li').length
    for (let i = 0; i < len; i++) {
        let a = document.createElement('a')
        list.appendChild(a)
        a.onclick = Click
        //设置标签自定义属性--很重要 添加索引
        a.setAttribute('index', i)
    }
    list.children[0].style.backgroundColor = '#ff8400'
        //点击
    function Click() {
        for (let i = 0; i < list.children.length; i++) {
            let a = list.children[i]
            a.style.backgroundColor = ''
            this.style.backgroundColor = '#ff8400'
            // 获取自定义属性 点的是第几个
            index = parseInt(this.getAttribute('index'))
            //调用动画
            animte(b_ul, (-index) * 800)
        }
    }

    //箭头
    arrol.children[0].onclick = function () {

        if (index == 0) {
            index = len;
            b_ul.style.left = -index * 800 + 'px';
        }
        index--;
        list.children[index].click()
    }
    //无缝滚动
    let firstLi = b_ul.children[0]
    let clone = firstLi.cloneNode(true)
    b_ul.appendChild(clone)


    arrol.children[1].onclick = function () {
        if (index === len) {
            b_ul.style.left = '0px';
            index = 0
        }
        index++;
        if (index < len) {
            list.children[index].click()
        } else {
            animte(b_ul, index * -800)
            for (let i = 0; i < list.children.length; i++) {
                let a = list.children[i]
                a.style.backgroundColor = ''
            }
            list.children[0].style.backgroundColor = '#ff8400'
        }
    }
    // 自动播放
    let time=setInterval(function () {
        arrol.children[1].click()
    },3000)



    banaer.onmouseenter=function () {
        clearInterval(time)
    }
    banaer.onmouseleave=function () {
        time=setInterval(function () {
            arrol.children[1].click()
        },3000)
    }

</script>

</body>
</html>
　　今天写了无缝轮播滚动虽然代码有许许多多的不规范，不过对思维的一个锻炼前面知识的复习，对于初学者也是很不错