手写轮播图，原生Js实现轮播效果效果

最新推荐文章于 2022-09-23 22:08:54 发布

有趣的万里挑一

最新推荐文章于 2022-09-23 22:08:54 发布

阅读量208

点赞数 1

分类专栏： CSS js 文章标签： javascript css

本文链接：https://blog.csdn.net/weixin_43347855/article/details/108793578

版权

js 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

手写轮播图，原生Js实现轮播效果

效果

在这里插入图片描述

废话不多说~ 直接上代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./lunbo.css" />
    <title>我的轮播图</title>
</head>

<body onload="one()">
    <div class="carousel">
        <!-- 轮播组图 -->
        <ul class="carousel-imgs" id="a">
            <li><a href="#"><img src="../img/banner_01.jpg" alt="banner" /></a></li>
            <li><a href="#"><img src="../img/banner_02.jpg" alt="banner" /></a></li>
            <li><a href="#"><img src="../img/banner_03.jpg" alt="banner" /></a></li>
        </ul>

        <!-- 前后页 -->
        <div class="prev" id="prev"></div>
        <div class="next" id="next"></div>


        <!-- 计数器 -->
        <div class="count">
            <ul>
                <li id="count1" class="active"></li>
                <li id="count2"></li>
                <li id="count3"></li>
            </ul>
        </div>
    </div>
    <script>
        window.onload = function () {
            var i = 1
            var btn1 = document.getElementById("prev");
            btn1.onclick = function () {
                i--
                if (i <= 0) i = 3
                switch (i) {
                    case 1:
                        document.getElementById("count1").className = "active"
                        document.getElementById("count2").className = ""
                        document.getElementById("count3").className = ""
                        break;
                    case 2:
                        document.getElementById("count1").className = ""
                        document.getElementById("count2").className = "active"
                        document.getElementById("count3").className = ""
                        break;
                    case 3:
                        document.getElementById("count1").className = ""
                        document.getElementById("count2").className = ""
                        document.getElementById("count3").className = "active"
                        break;
                    default:
                        document.getElementById("count1").className = "active"
                        document.getElementById("count2").className = ""
                        document.getElementById("count3").className = ""
                }
                document.getElementById("a").innerHTML = "<img src='../img/banner_0" + i + ".jpg'  />"
            }
            var btn2 = document.getElementById("next");
            btn2.onclick = function () {
                i++
                if (i >= 4) i = 1
                switch (i) {
                    case 1:
                        document.getElementById("count1").className = "active"
                        document.getElementById("count2").className = ""
                        document.getElementById("count3").className = ""
                        break;
                    case 2:
                        document.getElementById("count1").className = ""
                        document.getElementById("count2").className = "active"
                        document.getElementById("count3").className = ""
                        break;
                    case 3:
                        document.getElementById("count1").className = ""
                        document.getElementById("count2").className = ""
                        document.getElementById("count3").className = "active"
                        break;
                    default:
                        document.getElementById("count1").className = "active"
                        document.getElementById("count2").className = ""
                        document.getElementById("count3").className = ""
                }
                document.getElementById("a").innerHTML = "<img src='../img/banner_0" + i + ".jpg'  />"
            }
            var btn3 = document.getElementById("count1");
            btn3.onclick = function () {
                document.getElementById("a").innerHTML = "<img src='../img/banner_0" + 1 + ".jpg'  />"
                document.getElementById("count1").className = "active"
                document.getElementById("count2").className = ""
                document.getElementById("count3").className = ""
            }
            var btn4 = document.getElementById("count2");
            btn4.onclick = function () {
                document.getElementById("a").innerHTML = "<img src='../img/banner_0" + 2 + ".jpg'  />"
                document.getElementById("count1").className = ""
                document.getElementById("count2").className = "active"
                document.getElementById("count3").className = ""
            }
            var btn5 = document.getElementById("count3");
            btn5.onclick = function () {
                document.getElementById("a").innerHTML = "<img src='../img/banner_0" + 3 + ".jpg'  />"
                document.getElementById("count1").className = ""
                document.getElementById("count2").className = ""
                document.getElementById("count3").className = "active"
            }
        }  
    </script>
    /*
    取消注释，会实现自动轮播效果
    <script>
        window.onload = function () {
            var i = 1
            setInterval(() => {
                i++
                if (i >= 4) i = 1
                console.log(i)
                document.getElementById("a").innerHTML = "<img src='../img/banner_0" + i + ".jpg'  />"
            }, 2000)
        }  
    </script>
    */

</body>

</html>

下面是css样式

* {
    margin: 0;
    padding: 0;
}

ul li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

.carousel {
    width: 1000px;
    height: 300px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.carousel-imgs {
    width: 99999px;
}

.carousel-imgs li {
    float: left;
}

.carousel-imgs img {
    width: 1000px;
    height: 300px;
}

/* 难点1
怎么让多个轮播图显示在一片区域
方法：1.设置父级元素和子级元素宽度一致
2. overflow: hidden;
父级元素宽度只有1000，超过这个宽度的子元素将自动隐藏
注意：以前对这个属性值的认识，只有隐藏高度，其实宽度也是可以隐藏
 */

/* 
难点2
设置ul li是水平的，且没有前面的符号
li里面设置float left
ul里面设置list-style-type: none;
 */

.prev, .next {
    width: 32px;
    height: 32px;
    position: absolute;
    /* 仅仅添加这个，只是让这个div的顶端距离上面50% */
    top: 50%;
    margin-top: -16px
}

.prev {
    background-image: url(../img/prev.png);
    left: 50px
}

.next {
    background-image: url(../img/next.png);
    right: 50px
}

.count {
    width: 1000px;
    height: 10px;
    position: absolute;
    bottom: 25px;
}

.count ul {
    width: 60px;
    margin: 0 auto;
}

.count ul li {
    width: 10px;
    height: 10px;
    cursor: pointer;
    background-color: #666;
    opacity: .5;
    float: left;
    margin-right: 10px;
    border-radius: 50%;
}

/* 
这样写不会生效，可能是样式权重不够
.active {
    background-color: aqua;
    opacity: 1;
}
 */

.count .active {
    background-color: aqua;
    opacity: 1;
}

有趣的万里挑一

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手写轮播图，原生Js实现轮播效果效果

手写轮播图，原生Js实现轮播效果效果废话不多说~ 直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./lunbo.css"
复制链接

扫一扫