使用js编写简单的的轮播图效果

最新推荐文章于 2023-03-29 20:38:14 发布

一笑而过☜

最新推荐文章于 2023-03-29 20:38:14 发布

阅读量80

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/qq_41039734/article/details/92839007

版权

Js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        
        #banner {
            position: relative;
            width: 520px;
            height: 280px;
            margin: 10px auto;
        }
        
        .img-wrap {
            position: absolute;
            width: 2600px;
            left: 0;
            transition: 1s;
            height: 280px;
            /*弹性魔盒自适应对齐*/
            display: flex;
        }
        
        .item {
            width: 520px;
            height: 280px;
        }
        
        img {
            width: 520px;
            height: 280px;
        }
        
        .btn-list {
            position: absolute;
            width: 100px;
            height: 10px;
            left: 210px;
            bottom: 10px;
        }
        
        .btn {
            width: 10px;
            height: 10px;
            background: #eee;
            float: left;
            /*圆形*/
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }
        
        .active {
            background: #FF5000;
        }
    </style>
</head>

<body>
    <div id="banner">
        <div class="img-wrap">
            <div class="item"><img src="img/1.jpg" /></div>
            <div class="item"><img src="img/2.jpg" /></div>
            <div class="item"><img src="img/1.jpg" /></div>
            <div class="item"><img src="img/2.jpg" /></div>
            <div class="item"><img src="img/1.jpg" /></div>
        </div>
        <div class="btn-list">
            <div class="btn active"></div>
            <div class="btn"></div>
            <div class="btn"></div>
            <div class="btn"></div>
            <div class="btn"></div>
        </div>
    </div>
</body>
<script>
    var oBtn = document.querySelectorAll(".btn");
    var imgWrap = document.querySelector('.img-wrap');
    for (i = 0; i < oBtn.length; i++) {
        oBtn[i].id = i;
        oBtn[i].onclick = function() {
            for (var j = 0; j < oBtn.length; j++) {
                oBtn[j].classList.remove('active');
                this.classList.add("active");
            }
            imgWrap.style.left = this.id * (-520) + 'px';
        }
    }
</script>

</html>

一笑而过☜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用js编写简单的的轮播图效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
复制链接

扫一扫

专栏目录