前端必备技能——轮播图（原生代码+插件）

article/2025/9/23 11:36:52

你是否在为页面平平无奇而烦恼？

你是否在为页面特效过于简单而苦恼？

你是否也在为同是前端小白而别人的页面却比自己的更加精美？

如果你看到这篇博客，

你就已经赢在起跑线啦~

因为！！！

这篇博客将教会大家

如何让页面展现出你的独特个性风格并且吸引用户

一看到这个页面就觉得

嗯嗯嗯~~这个网页有点东西~

话不多说，上正题！

目录

轮播图的制作

1.框架的搭建

2.样式的装扮

3.动画效果

 鼠标经过轮播图

点击左右按钮图片就播放一张

图片滚动播放的同时小圆点也随之改变

鼠标经过轮播图暂停与运行

所有代码贴心附上

插件法插入轮播图

swiper插件插入轮播图

 网页上的大致轮播图的滚动就是上面的演示

轮播图的制作

在制作轮播图的过程中我分成3步：框架的搭建——样式的装扮——动画效果。

1.框架的搭建

如下代码展示，就是先在HTML里搭建出一个框架来：

<body><div class="wrap"><!-- 左右箭头按钮 --><a href="javascript:;" class='arrow-l'>&lt</a><a href="javascript:;" class='arrow-r'>&gt</a><!-- 图片用li来装--核心滚动区域 --><ul class='focus'><li><a href="#"><img src="1.jpg" alt=""></a></li><li><a href="#"><img src="2.jpg" alt=""></a></li><li><a href="#"><img src="3.jpg" alt=""></a></li><li><a href="#"><img src="4.jpg" alt=""></a></li></ul><!-- 底部小点点 --><ol class='circle'></ol></div>

2.样式的装扮

如下代码展示，就是先在CSS里装饰出大致的轮播图样子：

* {margin: 0;padding: 0;
}a {text-decoration: none;
}ul li {list-style-type: none;
}ol li {list-style-type: none;
}.wrap {overflow: hidden;position: relative;margin: 100px auto;width: 500px;height: 400px;background-color: pink;
}.wrap ul {position: absolute;top: 0;left: 0;width: 500%;/* 给ul盒子大一点就可以让li浮动起来 */
}.wrap ul li {float: left;/* margin-right: 10px; */width: 500px;height: 400px;
}.wrap ul li img {width: 100%;height: 100%;
}.arrow-l,
.arrow-r {display: none;position: absolute;top: 38%;text-align: center;width: 24px;height: 40px;line-height: 40px;color: white;z-index: 999;background: rgba(0, 0, 0, .3);
}.arrow-r {position: absolute;top: 38%;right: 0px;
}.circle {position: absolute;bottom: 0;left: 39%;height: 20px;width: 200px;/* background-color: skyblue; */
}.circle li {float: left;width: 20px;height: 20px;border-radius: 50%;margin-right: 6px;background: rgba(0, 0, 0, .3);
}.circle .current {background-color: #fff;
}

3.动画效果

接下来就是我们的重头戏，将页面中的图片滚动起来就是轮播图：

制作轮播图我们所想要的效果：

在写javascript之前，我们需要先绑定“load”事件，为了能够让页面渲染完再执行javascript

代码如下：

window.addEventListener('load', function() {}

 鼠标经过轮播图

当鼠标经过轮播图，左右按钮就显示，一旦离开就隐藏左右按钮。

用mouseenter、mouseleave两个事件来绑定执行：

 focus.addEventListener('mouseenter', function() {arrowl.style.display = 'block';arrowr.style.display = 'block';})focus.addEventListener('mouseleave', function() {arrowl.style.display = 'none';arrowr.style.display = 'none';}, 2000);})

点击左右按钮图片就播放一张

思路：我们先定义一个全局变量num，当我们点击一下就自增一次，然后滚动的距离就是ul的滚动距离，ul滚动距离=num*图片宽度。

 var num = 0;// 右侧按钮arrowr.addEventListener('click', function() {if (flag) {// flag = false; //关闭节流阀// alert('111');测试 事件绑定成功没有if (num == ul.children.length - 1) {ul.style.left = 0;num = 0; //无缝滚动效果 最后num=0回到起点第一张图}num++;animate(ul, -num * liWidth, function() {flag = true; //打开节流阀});//  效果：底部小圆圈跟随右侧按钮一起变化yuan++; //这个变量是控制小圆圈的播放// 如果yuan==4说明走到最后我们克隆的这张图片 我们就复原if (yuan == circle.children.length) {yuan = 0;}// 先清除其余小圆圈的current类名for (var i = 0; i < circle.children.length; i++) {circle.children[i].className = '';}circle.children[yuan].className = 'current';}})// 左侧按钮arrowl.addEventListener('click', function() {if (flag) {// flag = false;// alert('111');测试 事件绑定成功没有if (num == ul.children.length - 1) {num = ul.children.length - 1; //无缝滚动效果 最后num=0回到起点第一张图ul.style.left = num * liWidth + 'px';}num--;animate(ul, -num * liWidth, function() {flag = true;});//  效果：底部小圆圈跟随右侧按钮一起变化yuan--; //这个变量是控制小圆圈的播放// 如果yuan<0说明第一张图片，则小圆圈要改为第四个小圆圈（3）if (yuan < 0) {yuan = circle.children.length - 1;}// 先清除其余小圆圈的current类名for (var i = 0; i < circle.children.length; i++) {circle.children[i].className = '';}circle.children[yuan].className = 'current';}})

图片滚动播放的同时小圆点也随之改变

先进行获取到我们所需的元素：

 var ul = document.querySelector('.focus');var lis = focus.querySelectorAll('li');var circle = document.querySelector('.circle');var li = focus.querySelector('li');var liWidth = li.offsetWidth;

 我们为了更加自动化，当图片有多少张就有多少个小圆点，代码如下：

for (var i = 0; i < lis.length; i++) { //第一个for循环是创建livar li = document.createElement('li');// 记录小圆圈的索引号，通过自定义属性来做li.setAttribute('index', i);// 把上面增加的li添加到ol中去circle.appendChild(li);li.addEventListener('click', function() {for (var i = 0; i < circle.children.length; i++) { //创建的ol中的li进行遍历获取// 排他思想circle.children[i].className = '';}this.className = 'current'; //一定写成this

鼠标经过轮播图暂停与运行

当鼠标不经过轮播图还能够自动运行：

  // 自动播放轮播图var timer = setInterval(function() {// 手动调用点击事件arrowr.click();}, 2000);

所有代码贴心附上

window.addEventListener('load', function() {// 1.var arrowl = document.querySelector('.arrow-l');var arrowr = document.querySelector('.arrow-r');var focus = document.querySelector('.focus');// 2.// 效果1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。focus.addEventListener('mouseenter', function() {arrowl.style.display = 'block';arrowr.style.display = 'block';clearInterval(timer);timer = null; //清除定时器变量})focus.addEventListener('mouseleave', function() {arrowl.style.display = 'none';arrowr.style.display = 'none';timer = setInterval(function() {// 手动调用点击事件arrowr.click();}, 2000);})// 3.底部的小圆圈根据有几张图就有几个小圆圈来实行var ul = document.querySelector('.focus');var lis = focus.querySelectorAll('li');var circle = document.querySelector('.circle');var li = focus.querySelector('li');var liWidth = li.offsetWidth;// console.log(lis);只能得到4个节点//console.log(focus.children.length); //这样才能得到focus的孩子的长度有几个// 先对图片进行循环得到有几张图片for (var i = 0; i < lis.length; i++) { //第一个for循环是创建livar li = document.createElement('li');// 记录小圆圈的索引号，通过自定义属性来做li.setAttribute('index', i);// 把上面增加的li添加到ol中去circle.appendChild(li);li.addEventListener('click', function() {for (var i = 0; i < circle.children.length; i++) { //创建的ol中的li进行遍历获取// 排他思想circle.children[i].className = '';}this.className = 'current'; //一定写成this// 想要效果：点击小圆点，移动图片 移动的是ul// 别移动的距离=小圆圈的索引号*图片的宽度（注意是负值从右往左走）// 当我们点击某个小li就获取到li的索引号var index = this.getAttribute('index');var li = focus.querySelector('li');// 解决bug1：当我们点击了某个li就拿到当前li的索引号给num// 解决bug2：当我们点击了某个li 就把li的索引号给yuannum = index;yuan = index;var liWidth = li.offsetWidth;animate(ul, -liWidth * index); //ul移动})}//把第一个li的背景变为白色circle.children[0].className = 'current';// 克隆第一张图片li放到ul最后var first = ul.children[0].cloneNode(true);ul.appendChild(first);// 当点击左右按钮可以有轮播图切换效果var num = 0;// 效果：底部小圆圈跟随右侧按钮一起变化 设置一个全局变量计数（在点击事件外面定义）var yuan = 0;// flag节流阀var flag = true;// 右侧按钮arrowr.addEventListener('click', function() {if (flag) {// flag = false; //关闭节流阀// alert('111');测试 事件绑定成功没有if (num == ul.children.length - 1) {ul.style.left = 0;num = 0; //无缝滚动效果 最后num=0回到起点第一张图}num++;animate(ul, -num * liWidth, function() {flag = true; //打开节流阀});//  效果：底部小圆圈跟随右侧按钮一起变化yuan++; //这个变量是控制小圆圈的播放// 如果yuan==4说明走到最后我们克隆的这张图片 我们就复原if (yuan == circle.children.length) {yuan = 0;}// 先清除其余小圆圈的current类名for (var i = 0; i < circle.children.length; i++) {circle.children[i].className = '';}circle.children[yuan].className = 'current';}})// 左侧按钮arrowl.addEventListener('click', function() {if (flag) {// flag = false;// alert('111');测试 事件绑定成功没有if (num == ul.children.length - 1) {num = ul.children.length - 1; //无缝滚动效果 最后num=0回到起点第一张图ul.style.left = num * liWidth + 'px';}num--;animate(ul, -num * liWidth, function() {flag = true;});//  效果：底部小圆圈跟随右侧按钮一起变化yuan--; //这个变量是控制小圆圈的播放// 如果yuan<0说明第一张图片，则小圆圈要改为第四个小圆圈（3）if (yuan < 0) {yuan = circle.children.length - 1;}// 先清除其余小圆圈的current类名for (var i = 0; i < circle.children.length; i++) {circle.children[i].className = '';}circle.children[yuan].className = 'current';}})// 自动播放轮播图var timer = setInterval(function() {// 手动调用点击事件arrowr.click();}, 2000);
})

看到这是否觉得自己好像看懂了又好像没看懂？

别担心！

其实，还有更简便的方法！

今天咱就一整个大放送！

博主干货大放送！

插件法插入轮播图

swiper插件插入轮播图

插件的使用总结：

  1. 确认插件实现的功能
  2. 去官网Swiper中文网-轮播图幻灯片js插件,H5页面前端开发查看使用说明
  3. 下载插件
  4. 打开demo实例文件，查看需要引入的相关文件，并且引入
  5. 复制demo实例文件中的结构html，样式css以及js代码

具体操作：

1.我们先把下载的文件解压下来

 2.然后挑一个喜欢的轮播图样式

 打开任意一个样式后打开源代码复制里面的css样式

 3.最后把js、css分别引入到javascript中

 

接下来就可以疯狂复制代码啦~

body：

 <!-- Swiper --><div class="swiper-container"><div class="swiper-wrapper"><!-- Slide 1  写上需要轮播的图片 --><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div><div class="swiper-slide">Slide 4</div><div class="swiper-slide">Slide 5</div><div class="swiper-slide">Slide 6</div><div class="swiper-slide">Slide 7</div><div class="swiper-slide">Slide 8</div><div class="swiper-slide">Slide 9</div><div class="swiper-slide">Slide 10</div></div><!-- Add Pagination 页码--><div class="swiper-pagination"></div><!-- Add Arrows 左右两个按钮--><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div>

css：（这是自己需要复制的代码）

 <style>html, body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color:#000;margin: 0;padding: 0;}.swiper-container {width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}</style>

JS：（这是自己需要复制的代码）

 <script>var swiper = new Swiper('.swiper-container', {spaceBetween: 30,centeredSlides: true,autoplay: {delay: 2500,disableOnInteraction: false,},pagination: {// 如果需要分页器（小圆点）// 是否需要分页器el: '.swiper-pagination',// 点击分页器是否切换到对应的图片 是 true 否 falseclickable: true,},navigation: {// 如果需要前进后退按钮nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},});</script>

ok啦~

以上内容就能解决你关于制作轮播图的疑惑~

 如果对你有帮助就不要吝啬你的大拇指👍给我一个鼓励吧~


http://chatgpt.dhexx.cn/article/BrTKftRJ.shtml

相关文章

轮播图的多种实现及原理

轮播图的多种实现及原理

【写在前面】 最近&#xff0c;在自己的项目中遇到了很多轮播图。 当然&#xff0c;这里的很多&#xff0c;并非数量多&#xff0c;指的是种类很多&#xff0c;即多种实现。 然后我觉得有不少小技巧&#xff0c;就决定写一篇文章讲解一下。 本篇主要内容&#xff1a; 1、轮播图…
阅读更多...
网页轮播图（详细版）

网页轮播图（详细版）

在网页中&#xff0c;我们经常会看到各种轮播图的效果&#xff0c;它们到底是怎样实现的呢&#xff1f;今天&#xff0c;我们就一起来看一下&#xff01;首先&#xff0c;我们需要准备若干张图片&#xff0c;在这里我准备了五张图片。 功能需求&#xff1a; 鼠标经过轮播图模块…
阅读更多...
轮播图 （无缝轮播图）

轮播图 （无缝轮播图）

1.无缝轮播核心: 在最后多加一张第一张图, 当达到最后一张t1的时候 一瞬间将ul拉回到0的位置 结构&#xff1a; <div class"wrap"><ul><li><img src"./image/t1.png" alt""></li><li><img src"./i…
阅读更多...
JS来实现轮播图（走马灯）可左右切换图片，鼠标移入会停止轮播

JS来实现轮播图（走马灯）可左右切换图片，鼠标移入会停止轮播

效果一&#xff1a; 会自动进行轮播&#xff0c;当鼠标进入轮播图区域会停止轮播&#xff0c;点击左右箭头可以向前、向后进行切换图片 效果二&#xff1a; 这种效果比第一种效果简单&#xff0c;只要删除一些代码和修改一些样式即可。 实现原理 轮播图整体是放在ul里的&…
阅读更多...
oracle nvl函数 mysql_关于Oracle数据库中的nvl函数

oracle nvl函数 mysql_关于Oracle数据库中的nvl函数

以前将数据库查询结果展示在页面时&#xff0c;对于值null的字段&#xff0c;总是要判断下&#xff0c;如果为null&#xff0c;就显示ldquo;rdquo;&#xff0c;突然发现这个方法好笨 以前将数据库查询结果展示在页面时&#xff0c;对于值null的字段&#xff0c;总是要判断下&am…
阅读更多...
nvl 函数初识

nvl 函数初识

根据bi业务逻辑写sql时&#xff0c;在写法上有些区别&#xff0c;我习惯用case when &#xff0c;没有用过nvl所以试一试 bi某一列的业务如下&#xff1a; 我用sql分别试了case when 和 nvl &#xff0c;得到的结果是一致的 &#xff0c; 使用nvl函数的部分sql&#xff1a; …
阅读更多...
MySQL中创 NVL 函数

MySQL中创 NVL 函数

NVL的定义 NVL(s1, s2)&#xff1a;当s1为null时&#xff0c;返回s2&#xff0c;否则返回s1。 SELECT NVL(S, R) FROM DUAL; -- S SELECT NVL(NULL, R) FROM DUAL; -- RNVL方法的兼容策略 第一种&#xff1a;用 case when 代替 NVL&#xff0c;这种方法代码改造量较大&am…
阅读更多...
Xp 激活

Xp 激活

2019独角兽企业重金招聘Python工程师标准>>> 为了在xp下测试一键安装 支持多语言、多用户、多数据库、完美URL之路过秋天版博客发布[绝对有杀伤力的博客] 这两天为xp激活折腾了不少时间，在不断用ghost还原来还原去的，原因就是我有一张OEM版本的系统，正常方式的…
阅读更多...
Windows XP Professional With SP3 VOL[MSDN原版]+正版密钥

Windows XP Professional With SP3 VOL[MSDN原版]+正版密钥

Windows XP Professional简体中文版，这是一个中国人最熟悉不过的操作系统了（也有人称它一个最适合中国人的操作系统）。Windows XP 由于其出色的安全性、可靠性、易用性、高性能，使它获得了巨大的成功，直至今天它仍然是全球使用率最高的操作系统。 下面我们来说说…
阅读更多...
Windows.XP.x64.Pro.VOL(WINXP64位企业版)+正版序列号

Windows.XP.x64.Pro.VOL(WINXP64位企业版)+正版序列号

Windows.XP.x64.Pro.VOL(WINXP64位企业版)的设计初衷是&#xff1a;满足机械设计和分析、三维动画、视频编辑和创作以及科学计算和高性能计算应用程序等领域中需要大量内存和浮点性能的客户的需求。 专用技术应用程序的性能优势 64 位计算性能在汽车或飞机设计等领域体现出优势…
阅读更多...
如何查看XP系统的密匙

如何查看XP系统的密匙

最近有网友提问IT视窗小编说他家现在用的是xp系统&#xff0c;如何查看XP系统的密匙呢。其实查看XP系统密匙还是比较的简单的&#xff0c;小编就把查看XP系统密匙的两种方法都写成教程分享给大家。下面就是小编作为大神教你如何查看XP系统的密匙。希望大家都喜欢我的教程。 1、…
阅读更多...
IDEA 使用 README.md 介绍项目

IDEA 使用 README.md 介绍项目

IDEA 使用 README.md 介绍项目 文章目录 一.前言二.IDEA创建Markdown文件1.新建文件- 1.1.创建README.md文件 2.编辑md文件常用语法2.1.定义标题字号2.2. 文字样式2.2.1.文字斜体2.2.2.文字加粗2.2.3.文字删除线2.2.4. 引用文本 2.3.列表样式2.3.1 无符号列表2.3.2. 有符号列表…
阅读更多...
Github美化README

Github美化README

GITHUB中的MD文件 在github中新建一个仓库Create a new repository时会有一个README文件&#xff0c;其实为自述文件&#xff0c;介绍这个仓库的基本概要。这个文件也是MD文件&#xff0c;可用软件typora和vscode等md软件进行拟写就行了。也是下面介绍的第三种方法。 编写方式…
阅读更多...
README.md文件的作用及其文件内容的语法

README.md文件的作用及其文件内容的语法

README.md文件一般出现在项目的根目录下&#xff0c;其作用是对项目的主要信息进行描述。 如果一个项目你很长时间都没有动&#xff0c;突然你需要修改这个项目&#xff0c;那么通过README.md中对项目的描述能让你快速的再次上手&#xff1b; 或者别人拿到你的项目也能通过READ…
阅读更多...
原来Github上的README.md文件这么有意思——Markdown语言详解

原来Github上的README.md文件这么有意思——Markdown语言详解

转载请注明出处&#xff1a;http://blog.csdn.net/zhaokaiqiang1992 之前一直在使用github&#xff0c;也在上面分享了不少的项目和Demo&#xff0c;每次创建新项目的时候&#xff0c;使用的都是默认的README.md文件&#xff0c;也不曾对这个文件有过什么了解。但是在看到别人写…
阅读更多...
如何规范写出 README 模板？

如何规范写出 README 模板？

README 标准是由 RichardLitt 发起&#xff0c;十多名开发者共同贡献完成的&#xff0c;在 GitHub 上有 1230 Star&#xff1a;standard-readme 标准 README 实例&#xff1a; standard-readme/tree/main/example-readmes奖励&#xff1a;实例 本文模板获取地址&#xff1a;…
阅读更多...
GitHub README-Template.md - README.md 模板

GitHub README-Template.md - README.md 模板

GitHub README-Template.md - README.md 模板 A template to make good README.md. https://gist.github.com/PurpleBooth/109311bb0361f32d87a2 # Project TitleOne Paragraph of project description goes here## Getting StartedThese instructions will get you a copy o…
阅读更多...
怎么写一个超棒的 README 文档

怎么写一个超棒的 README 文档

点击上方 Java后端&#xff0c;选择 设为星标 优质文章&#xff0c;及时送达 大数据文摘出品 来源&#xff1a;medium 编译&#xff1a;青柠 如果你很着急、只是想要模板&#xff0c;可以直接跳到底部&#xff08;但这样一点不酷&#xff09;&#xff0c;准备酷的人&#xff0c…
阅读更多...
【工具推荐】最简单方法创建 README

【工具推荐】最简单方法创建 README

CSDN话题挑战赛第1期 活动详情地址&#xff1a;https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f 参赛话题&#xff1a;程序员常用小工具推荐 话题描述&#xff1a;俗话说&#xff0c;工欲善其事&#xff0c;必先利其器。作为每天和各种开发工具打交道的程序…
阅读更多...
编写规范的readme文件

编写规范的readme文件

为什么要写这篇博客&#xff1f; 其实我是一个入坑已经半年的程序员&#xff0c;因为不是计算机专业&#xff0c;只能自己摸索&#xff0c;所以我深知博客的重要性。每次我的学习笔记啊&#xff0c;项目的&#xff0c;面试题啊&#xff0c;有的&#xff0c;只要有时间&#xff…
阅读更多...
推荐文章

Copyright @ 2022~2023