JavaScript—原生轮播和无缝滚动

淩亂°似流年 2023-10-11 13:15 5阅读 0赞

<!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;
                width: 800px;
                height: 480px;
                position: relative;
                overflow: hidden;
            }
    
            #banber span:last-child {
                left: 780px;
            }
    
            #banber span {
                background: #999999;
                font-size: 26px;
                color: #ffffff;
                width: 20px;
                height: 40px;
                opacity: 0.7;
                position: absolute;
                top: 220px;
            }
    
            #banber ul {
                width: 6000px;
                position: absolute;
            }
    
            #banber ul li {
                width: 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%;
                width: 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.οnmοuseenter=function () {
            clearInterval(time)
        }
        banaer.οnmοuseleave=function () {
            time=setInterval(function () {
                arrol.children[1].click()
            },3000)
        }
    
    </script>
    
    </body>
    </html>

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

转载于:https://www.cnblogs.com/ruogu/p/10808155.html