简单轮播图

最新推荐文章于 2024-08-24 11:46:12 发布

weixin_45754783

最新推荐文章于 2024-08-24 11:46:12 发布

阅读量47

点赞数

文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/weixin_45754783/article/details/130149537

版权

该HTML代码展示了如何使用CSS3和JavaScript创建一个基本的滑动轮播图组件。它包括一个容器，多个图片项，以及用于切换图片的指示器。当用户点击指示器时，JavaScript函数会更新轮播图的位置，实现图片的平滑切换。

摘要由CSDN通过智能技术生成

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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;
            /* outline: 1px solid #fff; */
            left:50%;
            transform: translateX(-50%);
        }
        .indicator span{
            width: 20px;
            height: 20px;
            border:2px solid #ccc;
            border-radius: 50%;
            margin:0 3px;
        }
        .indicator span.active{
            background-color: #fff;
            border-color: #fff;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="carousel">
            <div class="item">
                <a href="">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ff81b5f29bd1681c0a2c6df883d14d38.jpg" alt="">
                </a>
            </div>
            <div class="item">
                <a href="">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b996f91f354815eb138d63f2e7e9391.jpg" alt="">
                </a>
            </div>
            <div class="item">
                <a href="">
                    <img src="" alt="">
                </a>
            </div>
            <div class="item">
                <a href="">
                    <img src="" alt="">
                </a>
            </div>
        </div>
        <div class="indicator">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script>
        var doms={
            carousel:document.querySelector('.carousel'),
            indicators:document.querySelectorAll('.indicator span')
        };
        function moveto(index){
            doms.carousel.style.transform=`translateX(-${index}00%)`

            //去除当前选中的指示器s
            var active =document.querySelector('.indicator span.active')
            active.classList.remove('active')
            //重新设置要选中的指示器
            doms.indicators[index].classList.add('active')
        }
        doms.indicators.forEach(function(item ,index){
            item.onclick=function(){
                moveto(index)
            }
        })
    </script>
</body>

</html>