做一个无缝轮播的demo

最新推荐文章于 2024-09-29 21:43:16 发布

兰亭花无序

最新推荐文章于 2024-09-29 21:43:16 发布

阅读量61

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/m0_56413631/article/details/120379894

版权

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            height: 400px;
            margin:100px auto;
            position:relative;
            border:10px solid red;
            overflow:hidden;
        }
        ul{
            list-style:none;
            width: 4200px;
            height: 400px;
            position:absolute;
            left: -600px;
            top: 0;
        }
        ul li{
            width: 600px;
            height: 400px;
            float: left;
            font-size:100px;
            text-align: center;
            line-height:400px;
        }
        .btn{
            width: 50px;
            height: 100px;
            background-color: rgba(0,0,0,0.6);
            font-size:40px;
            text-align:center;
            line-height:100px;
            position: absolute;
            top: 50%;
            margin-top: -50px;
            color:#fff;
        }
        .left{
            left: 0;
        }
        .right{
            right:0;
        }
        ol{
            list-style: none;
            position:absolute;
            right: 10px;
            bottom: 20px;
            width: 200px;

        }
        ol li{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #333;
            float: left;

        }
        ol li+li{
            margin-left: 6px;
        }
        ol li.active{
            background-color: #f40;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li style="background:orange;">5</li>
            <li style="background:#ccc;">1</li>
            <li style="background:hotpink;">2</li>
            <li style="background:yellowgreen;">3</li>
            <li style="background:deepskyblue;">4</li>
            <li style="background:orange;">5</li>
            <li style="background:#ccc;">1</li>
        </ul>
        <div class="btn left">&lt;</div>
        <div class="btn right">&gt;</div>
        <ol>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>

    <script src="./utils.js"></script>
    <script>

        const box = document.querySelector('.box'),
              ul = box.querySelector('ul'),
              ulis = ul.querySelectorAll('li'),
              liWidth = ulis[0].offsetWidth,
              ol = box.querySelector('ol'),
              olis = ol.querySelectorAll('li'),
              leftBtn = box.querySelector('.left'),
              rightBtn = box.querySelector('.right')

        let currentIndex = 1,  // 用来记录当前显示的索引
            nextIndex = 2      // 用来记录即将显示的索引

        setInterval(function(){
            animate(ul,{left:-nextIndex * liWidth},1000,function(){
                if(currentIndex === 6){
                    css(ul,'left',-liWidth + 'px')
                    currentIndex = 1
                    nextIndex = 2
                }
            })
            // 专门定义一个变量 记录小圆点的索引
            let circleIndex = nextIndex - 1
            for(let i = 0 ; i < olis.length ; i++){
                olis[i].className = ''
            }
            if(circleIndex === 5){
                circleIndex = 0
            }
            olis[circleIndex].className = 'active'
            
            
            currentIndex = nextIndex 
            nextIndex++

            
        },2000)

       
    </script>
</body>
</html>