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

轮播图出现在各大网站,基本上人们进入任何一个网站的时候,第一眼看见的内容就是轮播图,三两张图片,有的数量更多一些。

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

作者: 梦里梦中梦

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

前言

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

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

淘宝轮播图

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

京东轮播图

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

天猫轮播图

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

我给大家提供一个纯Js轮播图示例代码,大家可在此基础上进行改进,包括指示器的样式,容器的大小,按钮的样式,轮播时间等等都可以修改的。该代码通俗易懂,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>

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

JavaScript 20 年 中文版之创立标准

值得收藏的前端常用60余种工具方法「JS篇」

箭头函数和常规函数之间的 5 个区别

通过发布/订阅的设计模式搞懂 Node.js 核心模块 Events

「前端篇」不再为正则烦恼

「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能

深入细品浏览器原理「流程图」

JavaScript 已进入第三个时代,未来将何去何从?

前端上传前预览文件 image、text、json、video、audio「实践」

深入细品 EventLoop 和浏览器渲染、帧动画、空闲回调的关系

推荐13个有用的JavaScript数组技巧「值得收藏」

前端必备基础知识:window.location 详解

不要再依赖CommonJS了

犀牛书作者:最该忘记的JavaScript特性

36个工作中常用的JavaScript函数片段「值得收藏」

Node + H5 实现大文件分片上传、断点续传

一文了解文件上传全过程(1.8w字深度解析)「前端进阶必备」

【实践总结】关于小程序挣脱枷锁实现批量上传

手把手教你前端的各种文件上传攻略和大文件断点续传

字节跳动面试官:请你实现一个大文件上传和断点续传

谈谈前端关于文件上传下载那些事【实践】

手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件

最全的 JavaScript 模块化方案和工具

「前端进阶」JS中的内存管理

JavaScript正则深入以及10个非常有意思的正则实战

前端面试者经常忽视的一道JavaScript 面试题

一行JS代码实现一个简单的模板字符串替换「实践」

JS代码是如何被压缩的「前端高级进阶」

前端开发规范:命名规范、html规范、css规范、js规范

【规范篇】前端团队代码规范最佳实践

100个原生JavaScript代码片段知识点详细汇总【实践】

关于前端174道 JavaScript知识点汇总(一)

关于前端174道 JavaScript知识点汇总(二)

关于前端174道 JavaScript知识点汇总(三)

几个非常有意思的javascript知识点总结【实践】

都2020年了,你还不会JavaScript 装饰器?

JavaScript实现图片合成下载

70个JavaScript知识点详细总结(上)【实践】

70个JavaScript知识点详细总结(下)【实践】

开源了一个 JavaScript 版敏感词过滤库

送你 43 道 JavaScript 面试题

3个很棒的小众JavaScript库,你值得拥有

手把手教你深入巩固JavaScript知识体系【思维导图】

推荐7个很棒的JavaScript产品步骤引导库

Echa哥教你彻底弄懂 JavaScript 执行机制

一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧

深入解析高频项目中运用到的知识点汇总【JS篇】

JavaScript 工具函数大全【新】

从JavaScript中看设计模式(总结)

身份证号码的正则表达式及验证详解(JavaScript,Regex)

浏览器中实现JavaScript计时器的4种创新方式

Three.js 动效方案

手把手教你常用的59个JS类方法

127个常用的JS代码片段,每段代码花30秒就能看懂-【上】

深入浅出讲解 js 深拷贝 vs 浅拷贝

手把手教你JS开发H5游戏【消灭星星】

深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】

手把手教你全方位解读JS中this真正含义【实践】

书到用时方恨少,一大波JS开发工具函数来了

干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)

手把手教你JS 异步编程六种方案【实践】

让你减少加班的15条高效JS技巧知识点汇总【实践】

手把手教你JS开发H5游戏【黄金矿工】

手把手教你JS实现监控浏览器上下左右滚动

JS 经典实例知识点整理汇总【实践】

2.6万字JS干货分享,带你领略前端魅力【基础篇】

2.6万字JS干货分享,带你领略前端魅力【实践篇】

简单几步让你的 JS 写得更漂亮

恭喜你获得治疗JS this的详细药方

谈谈前端关于文件上传下载那些事【实践】

面试中教你绕过关于 JavaScript 作用域的 5 个坑

Jquery插件(常用的插件库)

【JS】如何防止重复发送ajax请求

JavaScript+Canvas实现自定义画板

Continuation 在 JS 中的应用「前端篇」

作者: 梦里梦中梦

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

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/10398.html

(0)
上一篇 2023年 4月 22日 下午11:58
下一篇 2023年 4月 22日 下午11:58

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信