纯JS手写轮播图(代码逻辑清晰，通俗易懂)

zhezhongyun 2024-12-26 17:42 85 浏览

作者：梦里梦中梦

转发链接：https://mp.weixin.qq.com/s/6J0uJKaC4SPlt2h7oeSP-Q

前言

轮播图出现在各大网站，基本上人们进入任何一个网站的时候，第一眼看见的内容就是轮播图，三两张图片，有的数量更多一些。这些就是网站建设中所谓的banner广告轮播图，而这些信息往往是浏览网页时的第一视觉，所以这些轮播广告图可作为网站建设中至关重要的元素。首页banner广告轮播图的存在不光光起到了装饰网站的作用，它所带来的网络营销效果才是真正意义上的存在价值。

淘宝轮播图

京东轮播图

天猫轮播图

所以在网站建设的时候，网站banner图一定要精心设计，不可敷衍了事，Banner图的数量和轮播的交互方式等等都要经过深思熟虑，美观固然重要，但是也要考虑到用户体验，以及广告图所带来的营销效果。我们一直认为，首页轮播广告图在整个网站建设的重要性不可忽视。

我给大家提供一个纯Js轮播图示例代码，大家可在此基础上进行改进，包括指示器的样式，容器的大小，按钮的样式，轮播时间等等都可以修改的。该代码通俗易懂，Js部分逻辑清晰。赶紧动手起来吧朋友们，创造属于自己的样式！！

我给大家提供轮播图示例

01 CSS代码

        <style>
            *{
                list-style: none;
            }
            #wrap {
                width: 590px;
                height: 470px;
                margin: 150px auto;
                position: relative;
                cursor: pointer;
            }

            #pic li {
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
            }

            #num {
                position: absolute;
                z-index: 2;
                bottom: 20px;
                left: 46px;
            }

            #num li {
                float: left;
                width: 8px;
                height: 8px;
                margin: 5px;
                border-radius: 50%;
                border: 1px solid #FFFFFF;
                line-height: 20px;
                background: transparent;
                text-align: center;
            }

            #num li.active {
                background:  #fefefe;
            }

            .arrow {
                z-index: 3;
                height: 40px;
                width: 30px;
                position: absolute;
                top: 45%;
                line-height: 40px;
                background: rgba(0, 0, 0, 0.3);
                text-align: center;
                display: none;
            }
            #wrap:hover .arrow {
                display: block;
            }
            .arrow:hover {
                background: rgba(0, 0, 0, 0.7);
            }


            #left {
                left: 0;
            }

            #right {
                right: 0;
            }

        </style>

02 HTML 代码

<!--轮播图开始注意这里的图片路径，要使用自己的图片路径哦-->        <div id="wrap">            <ul id="pic">
                <li style="display: none;"><img src="images/f7a4711ce9487466.jpg" alt=""></li>
                <li style="display: none;"><img src="images/ecc8690ae254c16f.jpg" alt=""></li>
                <li style="display: block;"><img src="images/46cdcd636c8608e2.jpg" alt=""></li>
                <li style="display: none;"><img src="images/79dd3ce6165857f7.jpg" alt=""></li>
                <li style="display: none;"><img src="images/b31ec8402a42fbb3.jpg" alt=""></li>
                <li style="display: none;"><img src="images/93c8a83baeaa7f49.jpg" alt=""></li>
                <li style="display: none;"><img src="images/cf523718998ccd27.jpg" alt=""></li>
            </ul>
            <ul id="num">
                <li class="active"></li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
            </ul>
            <a href="javascript:;" class="arrow" id="left"><</a>
            <a href="javascript:;" class="arrow" id="right">></a>
        </div>

03 JS 代码

<script type="text/javascript">
            function $(id) {
                return document.getElementById(id);
            }
            window.onload = function() {
                var oLeft = $("left");
                var oRight = $("right");
                var index = 0;
                var timer = null;
                var pic = $("pic").getElementsByTagName("li");
                var num = $("num").getElementsByTagName("li");
                var oDiv = $("wrap");

                oRight.onclick = function() {
                    index++;
                    if (index >= pic.length) {
                        index = 0;
                    }
                    change(index);
                }
                oLeft.onclick = function() {
                    index--;
                    if (index < 0) {
                        index = pic.length - 1;
                    }
                    change(index);
                }
                oDiv.onmouseover = function() {
                    clearInterval(timer);
                }
                oDiv.onmouseout = function() {
                    timer = setInterval(run, 2000); //鼠标移出后重新开始定时器
                }

                timer = setInterval(run, 4000); //定时器

                function run() { //用于定时器的函数
                    index++;
                    if (index >= pic.length) {
                        index = 0;
                    }
                    change(index);
                }

                for (var i = 0; i < num.length; i++) {
                    num[i].index = i; //把索引值存起来
                    num[i].onmouseover = function() {
                        change(this.index);
                    }
                }

                function change(curindex) { //用于切换图片的函数
                    for (var i = 0; i < pic.length; i++) {
                        pic[i].style.display = "none";
                        num[i].className = "";
                    }
                    pic[curindex].style.display = "block";
                    num[curindex].className = "active";
                    index = curindex;
                }
            }
        </script>

纯JS手写轮播图(代码逻辑清晰，通俗易懂)

前言

01 CSS代码

02 HTML 代码

03 JS 代码

推荐JavaScript经典实例学习资料文章

相关推荐

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）

在SpringBoot+Vue3项目中通过Nginx代理WebSocket实现跨域通信

利用webSocket实现消息的实时推送

谈谈websocket跨域

前端开发规范(一、HTML篇)

html5 工业web组态-开发自定义的组件 (炫酷按钮)

Python每日一库之Beautiful Soup（python mtime）