banner轮播图制作

最新推荐文章于 2022-08-30 20:17:29 发布

靳先生.

最新推荐文章于 2022-08-30 20:17:29 发布

阅读量431

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_42723113/article/details/104221096

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

之前做过几次banner的轮播图在后期都发现了一些问题，所以这次更新了最新版元素js制作轮播图的方法，效果图如下：

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Banner轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        ul,
        ol {
            list-style-type: none;
        }

        #banner {
            width: 1280px;
            height: 320px;
            position: relative;
            overflow: hidden;
            border-radius: 5px;
        }

        #banner img {
            width: 100%;
            height: 100%;
        }

        #oul li {
            position: absolute;
            top: 0;
            left: 0;
            transition: 1s;
        }

        #ool {
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 2;
        }

        #ool li {
            float: left;
            width: 35px;
            height: 4px;
            transition: 1s;
            background-color: #fff;
            margin: 0 5px;
            cursor: pointer;
        }

        #ool .bhys {
            background-color: #3d7eff;
        }
    </style>
</head>

<body>
    <div id="banner">
        <ul id="oul">
            <li><a href="#"><img src="images/banner1.jpg" alt="banner1"></a></li>
            <li><a href="#"><img src="images/banner2.jpg" alt="banner2"></a></li>
            <li><a href="#"><img src="images/banner3.jpg" alt="banner3"></a></li>
            <li><a href="#"><img src="images/banner4.jpg" alt="banner4"></a></li>
            <li><a href="#"><img src="images/banner5.jpg" alt="banner5"></a></li>
        </ul>
        <ol id="ool"></ol>
    </div>
    <script>
        var oul = document.getElementById("oul").getElementsByTagName("li");
        var ool = document.getElementById("ool");
        var oli = ool.getElementsByTagName("li");
        var place = 0;

        function hide(i) {//定义banner图隐藏函数
            oul[i].style.opacity = 0;
            oul[i].style.zIndex = 1;
            oli[i].className = "";
        }

        function show(i) {//定义banner图显示函数
            oul[i].style.opacity = 1;
            oul[i].style.zIndex = 2;
            oli[i].className = "bhys";
        }
        for (var i = 0; i < oul.length; i++) {
            var li = document.createElement("li");
            ool.appendChild(li).index = i;//定义索引
            oli[i].onmouseover = function () {
                for (var i = 0; i < oul.length; i++) {
                    hide(i);//当鼠标经过时，全部隐藏。
                }
                show(this.index);//鼠标指定的焦点图显示
                place = this.index;
                place++;
            }
        }

        function move() {
            for (var i = 0; i < oul.length; i++) {
                hide(i);
            }
            if (place < oul.length) {
                show(place);
            } else {
                place = 0;
                show(place);
            }
            place++;
        }
        move();
        setInterval("move()", 4000);//每4秒轮播一次
    </script>
</body>

</html>

这样一个简单的banner轮播图就制作成功了。

官网：https://www.cclown.com

博客地址：https://blog.cclown.com

本文选自CClown的原创文章，转载请注明内容来源：CClown(https://blog.cclown.com/post/19.html)

希望对你们有帮助