手搓轮播图

清一照

已于 2024-07-12 15:42:03 修改

阅读量160

点赞数 1

文章标签： javascript 开发语言 html5

于 2024-07-12 15:41:19 首次发布

本文链接：https://blog.csdn.net/m0_52466163/article/details/140380859

版权

照着视频手搓了一个轮播图

- 效果图
- 轮播图源码

效果图

在这里插入图片描述

轮播图源码

<!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-sizing: border-box;
        }

        .container {
            width: 500px;
            height: 300px;
            margin: 10px auto;
            /* 只显示第一张图片 */
            overflow: hidden;
            position: relative;
        }

        .carousel {
            width: 100%;
            height: 100%;
            /* 弹性布局，横向排列 */
            display: flex;
            transition: 0.5s;
        }

        .container .carousel img {
            width: 500px;
            height: 300px;
        }

        .indicator {
            position: absolute;
            bottom: 10px;
            display: flex;
            left: 5%;
            /* transform: translateX(-50%); */
        }
        .indicator span{
            width: 20px;
            height: 20px;
            border: 2px solid #ccc;
            border-radius: 50%;
            margin: 0 3px;
            /* outline: 1px solid #ccc; */
           
        }
        .indicator  .active{
            background:white;
            border-color: white;
        }
        .btn{
            position: absolute;
            display: flex;
            bottom: 20px;
            flex-direction: row;
            align-items: end;
right: 10%;        }
         .btn button{
            display: block;
            width: 20px;
            height: 20px;
            border: 2px solid #ccc;
            border-radius: 50%;
            margin-right: 10px;
            right: 5%;
            /* outline: 1px solid #ccc; */
           
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="carousel">
            <div class="item"><img src="./img/1.jpg" alt=""></div>
            <div class="item"><img src="./img/2.jpg" alt=""></div>
            <div class="item"><img src="./img/3.jpg" alt=""></div>
            <div class="item"><img src="./img/4.jpg" alt=""></div>
        </div>
        <div class="indicator">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="btn">
            <button id="pre">
                P
            </button>
            <button id="next">
                N
            </button>
        </div>
        </div>
    </div>
    <script>
        let doms = {
            carousel:document.querySelector('.carousel'),
            indicators:document.querySelectorAll('.indicator span'),
            btnR :document.getElementById('next'),
            btnL : document.getElementById('pre')
        }
        let index = 0
        //console.log(doms)
        /**
         * 移动轮播图到第几个板块
         * @param{*}index
         * */
        function moveTo(index){
            //改变图片
            doms.carousel.style.transform = `translateX(-${index}00%)`
            // 改变原点
            let active = document.querySelector('.indicator .active')
            active.classList.remove('active')
            doms.indicators[index].classList.add('active')
        }
        doms.indicators.forEach(function(item,i){
            item.onclick = function(){
                moveTo(i)
                index=i
            }
        })
        
        setInterval(function(){
            index++
            index%=4
            moveTo(index)
        },2000)

        // 注册按钮监听器
        doms.btnR.addEventListener("click",function(){
            index++
            index%=4
            moveTo(index)
        })
        doms.btnL.addEventListener("click",function(){
            index--
            if(index<0){
                index = 3
            }
            moveTo(index)
        })
        
        
    </script>
</body>

</html>