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

article/2025/9/23 12:38:26

效果一：

 会自动进行轮播，当鼠标进入轮播图区域会停止轮播，点击左右箭头可以向前、向后进行切换图片

效果二：

 这种效果比第一种效果简单，只要删除一些代码和修改一些样式即可。

实现原理

轮播图整体是放在ul里的，li里存放img图片（轮播的图片）

<ul><li><img></li>
</ul>

给li元素进行绝对定位，且给每个li一个z-index值（堆叠数值，可以理解为z轴，数值越大，这个元素就会叠在数值小的元素上面，比如图片1的z-index大于图片2的，图片1就会显示，图片2会在图片1下面不显示，我们可以利用这点进行图片的轮换）。

然后我们把li元素放到一个arr数组中，并开始给每个li设置z-index，在arr数组中，位置越靠后（下标越大）的li，它的z-index越大，然后我们进行轮播，把arr数组中最后一个li换到数组前面，然后其他元素就挤上前，这样来，每个li都会有机会到arr数组的尾部，即z-index最大的地方，所以图片就会轮换。

代码部分

1.先设置整体样式。

<style>body {background-color: rgb(119, 115, 110);}ul {height: 200px;width: 800px;padding: 0;position: absolute;/* 水平居中 */left: 50%;margin-left: -400px;/* 垂直居中 */top: 50%;margin-top: -100px;list-style: none;}/* 移入到轮播图区域把鼠标形状变成‘手’ */ul:hover {cursor: pointer;}li {position: absolute;left: 0;/* 过渡属性，让轮播图切换更自然 */transition: 0.4s;}</style>

2.然后只在body里只写一个ul，li 和 img 都直接在js中循环创建

<body><ul id="banner"></ul>
</body>

3.JS代码部分，获取ul 然后循环创建li 和 img

//1.获取ul
var cur_ul = document.getElementById('banner')
// 2.创建一个数组实例
var arr = new Array();// 用js来创建li、img元素，有多少张图片要轮播就循环多少次
for (i = 1; i <= 5; i++) {// 创建li元素var cur_li = document.createElement('li')// 创建img元素var cur_img = document.createElement('img')// 给img元素设置src、width、height属性// 这里src是轮播图的路径// 在img文件夹下的图片命名为1.jpg、2.jpg、3.jpg....才可以这样写cur_img.src = 'img/' + i + '.jpg';cur_img.style.width = '400px';cur_img.style.height = '200px';// 把img元素插入到创建的li里面cur_li.appendChild(cur_img);// 然后在把li插入到ul里面cur_ul.appendChild(cur_li);// 然后给ul元素设置事件，鼠标移进来停止轮播cur_ul.onmouseenter = function () {clearInterval(timer)}// 鼠标移出ul又继续轮播图片cur_ul.onmouseleave = function () {timer = setInterval(get_next, 3000)}// 当创建完一个li（li里已经有img元素）就把li添加到arr数组里// arr里存的li 相当于一个对象，在其他地方在把arr里的li取出来，还是指向原来那个，并不是一个新的li// 相当于对象的浅拷贝，指针指向问题arr.push(cur_li)
}

      arr里存的li 相当于存了一个对象，存的只是这个li的引用地址，在其他地方再把arr里的li取出来，还是指向原来那个li，修改的也还是原来那个li，并不是一个新的li。

4.JS代码部分，设置轮播图里图片的位置，因为轮播要显示三张图片，即第一种效果，如果要实现第二种效果，这个代码可以不写，然后在设置一下ul的宽即可实现效果二

// 因为所写的轮播图是中间图片放大大，左右两边图片正常，所以要进行下面的操作
// 如果你只需要那种一张张图片轮播，即没有左右两边的轮播图，可以去掉下面代码
// 我们要三张图片进行展示， 左 中 右  
var len = arr.length - 1;
// 这是取得左边图片并调整位置
arr[len - 2].style.left = '0px';
// 这是取得中间图片并调整位置
arr[len - 1].style.left = '200px';
// 这是取得右边图片并调整位置
arr[len].style.left = '400px';
// 然后中间图片调用scale使其变大
arr[len - 1].style.transform = 'scale(1.3)'
// 中间图片也给其一个较大的堆叠数值，使其中间图片在左右图片上面
arr[len - 1].style.zIndex = 100;

5、JS代码部分，封装轮播图函数，我们使用一个间歇定时器setInterval来轮播图片（会每隔相应的时间来执行其里面的代码）

// 然后开始进行轮播，原理就是换arr里的li元素的位置，越靠后的li元素z-index越大
// z-index越大，就会叠在其他li元素上面，所以换arr里的li位置就可以实现轮播
function get_next() {var give_up = arr[arr.length - 1];//获取arr数值里最后一个li元素arr.pop();//删除掉最后一个li元素arr.unshift(give_up);//最后把最后一个元素插入到arr数组的前面// 然后重新给arr数组里的li元素设置z-index和scalefor (var i = 0; i < arr.length; i++) {arr[i].style.zIndex = i;arr[i].style.transform = 'scale(1)'}// 这步就是展示arr的后三张图片，和前一个步骤的一样arr[len - 2].style.left = '0px';arr[len - 1].style.left = '200px';arr[len].style.left = '400px';arr[len - 1].style.transform = 'scale(1.3)'arr[len - 1].style.zIndex = 100;
}
// 声明一个定时器，然后把轮播图函数放进间歇函数，3秒进行一次轮播
var timer = setInterval(get_next, 3000)

6.JS代码部分，接下来就是左右两个箭头的创建了

// 用js创建左箭头
var pre_img = document.createElement('img')
pre_img.src = 'img/preImg.png';//左箭头图片
pre_img.style.position = 'absolute';
pre_img.style.top = 0;
pre_img.style.bottom = 0;
pre_img.style.left = 0;
pre_img.style.margin = 'auto';
pre_img.style.zIndex = 100;
cur_ul.appendChild(pre_img);// 用js创建右箭头
var next_img = document.createElement('img')
next_img.src = 'img/nexImg.png';//右箭头的图片
next_img.style.position = 'absolute';
next_img.style.top = 0;
next_img.style.bottom = 0;
next_img.style.right = 0;
next_img.style.margin = 'auto';
next_img.style.zIndex = 100;
cur_ul.appendChild(next_img);

7.然后给箭头绑定点击事件

// 给左箭头点击绑定事件
pre_img.onclick = function () {get_pre();
}
// 右箭头的作用就是向前轮播一直图片，和我们上面写的get_next()方法要实现的功能一样，直接引用
next_img.onclick = function () {get_next();
}// 左箭头的绑定事件 和get_next()思路一样，就是要改一下就行。
// 先取出arr数组第一个li，在把这个li放到最后即可
function get_pre() {var give_up = arr[0];arr.shift();//取出来最后一张图片arr.push(give_up);//把最后一张图片放到第一张for (var i = 0; i < arr.length; i++) {arr[i].style.zIndex = i;arr[i].style.transform = 'scale(1)'}arr[len - 2].style.left = '0px';arr[len - 1].style.left = '200px';arr[len].style.left = '400px';arr[len - 1].style.transform = 'scale(1.3)'arr[len - 1].style.zIndex = 100;
}

整体代码

如果要直接复制，注意要修改下图片的路径，不然你的轮播图名字要是 1.jpg、2.jpg、3.jpg...就行

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: rgb(119, 115, 110);}ul {height: 200px;width: 800px;padding: 0;position: absolute;/* 水平居中 */left: 50%;margin-left: -400px;/* 垂直居中 */top: 50%;margin-top: -100px;list-style: none;}/* 移入到轮播图区域把鼠标形状变成‘手’ */ul:hover {cursor: pointer;}li {position: absolute;left: 0;/* 过渡属性，让轮播图切换更自然 */transition: 0.4s;}</style>
</head><body><ul id="banner"></ul><script>//1.获取ulvar cur_ul = document.getElementById('banner')// 2.创建一个数组实例var arr = new Array();// 用js来创建li、img元素，有多少张图片要轮播就循环多少次for (i = 1; i <= 5; i++) {// 创建li元素var cur_li = document.createElement('li')// 创建img元素var cur_img = document.createElement('img')// 给img元素设置src、width、height属性// 这里src是轮播图的路径// 在img文件夹下的图片命名为1.jpg、2.jpg、3.jpg....才可以这样写cur_img.src = 'img/' + i + '.jpg';cur_img.style.width = '400px';cur_img.style.height = '200px';// 把img元素插入到创建的li里面cur_li.appendChild(cur_img);// 然后在把li插入到ul里面cur_ul.appendChild(cur_li);// 然后给ul元素设置事件，鼠标移进来停止轮播cur_ul.onmouseenter = function () {clearInterval(timer)}// 鼠标移出ul又继续轮播图片cur_ul.onmouseleave = function () {timer = setInterval(get_next, 3000)}// 当创建完一个li（li里已经有img元素）就把li添加到arr数组里// arr里存的li 相当于一个对象，在其他地方在把arr里的li取出来，还是指向原来那个，并不是一个新的li// 相当于对象的浅拷贝，指针指向问题arr.push(cur_li)}// 因为所写的轮播图是中间图片放大大，左右两边图片正常，所以要进行下面的操作// 如果你只需要那种一张张图片轮播，即没有左右两边的轮播图，可以去掉下面代码// 我们要三张图片进行展示， 左 中 右  var len = arr.length - 1;// 这是取得左边图片并调整位置arr[len - 2].style.left = '0px';// 这是取得中间图片并调整位置arr[len - 1].style.left = '200px';// 这是取得右边图片并调整位置arr[len].style.left = '400px';// 然后中间图片调用scale使其变大arr[len - 1].style.transform = 'scale(1.3)'// 中间图片也给其一个较大的堆叠数值，使其中间图片在左右图片上面arr[len - 1].style.zIndex = 100;// 封装轮播图函数 // 然后开始进行轮播，原理就是换arr里的li元素的位置，越靠后的li元素z-index越大// z-index越大，就会叠在其他li元素上面，所以换arr里的li位置就可以实现轮播function get_next() {var give_up = arr[arr.length - 1];//获取arr数值里最后一个li元素arr.pop();//删除掉最后一个li元素arr.unshift(give_up);//最后把最后一个元素插入到arr数组的前面// 然后重新给arr数组里的li元素设置z-index和scalefor (var i = 0; i < arr.length; i++) {arr[i].style.zIndex = i;arr[i].style.transform = 'scale(1)'}// 这步就是展示arr的后三张图片，和前一个步骤的一样arr[len - 2].style.left = '0px';arr[len - 1].style.left = '200px';arr[len].style.left = '400px';arr[len - 1].style.transform = 'scale(1.3)'arr[len - 1].style.zIndex = 100;}// 声明一个定时器，然后把轮播图函数放进间歇函数，3秒进行一次轮播var timer = setInterval(get_next, 3000)// 用js创建左箭头var pre_img = document.createElement('img')pre_img.src = 'img/preImg.png';//左箭头图片pre_img.style.position = 'absolute';pre_img.style.top = 0;pre_img.style.bottom = 0;pre_img.style.left = 0;pre_img.style.margin = 'auto';pre_img.style.zIndex = 100;cur_ul.appendChild(pre_img);// 用js创建右箭头var next_img = document.createElement('img')next_img.src = 'img/nexImg.png';//右箭头的图片next_img.style.position = 'absolute';next_img.style.top = 0;next_img.style.bottom = 0;next_img.style.right = 0;next_img.style.margin = 'auto';next_img.style.zIndex = 100;cur_ul.appendChild(next_img);// 给左箭头点击绑定事件pre_img.onclick = function () {get_pre();}// 右箭头的作用就是向前轮播一直图片，和我们上面写的get_next()方法要实现的功能一样，直接引用next_img.onclick = function () {get_next();}// 左箭头的绑定事件 和get_next()思路一样，就是要改一下就行。// 先取出arr数组第一个li，在把这个li放到最后即可function get_pre() {var give_up = arr[0];arr.shift();//取出来最后一张图片arr.push(give_up);//把最后一张图片放到第一张for (var i = 0; i < arr.length; i++) {arr[i].style.zIndex = i;arr[i].style.transform = 'scale(1)'}arr[len - 2].style.left = '0px';arr[len - 1].style.left = '200px';arr[len].style.left = '400px';arr[len - 1].style.transform = 'scale(1.3)'arr[len - 1].style.zIndex = 100;}</script>
</body></html>


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

相关文章

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…
阅读更多...
如何写好github上的README

如何写好github上的README

项目名称&#xff08;超大字体或者是图片形式&#xff09; 这里再写一句骚气又精准的话描述你的项目吧 上手指南 写几句这样的话概括接下来的内容&#xff1a;以下指南将帮助你在本地机器上安装和运行该项目&#xff0c;进行开发和测试。关于如何将该项目部署到在线环境&…
阅读更多...
README.md编写

README.md编写

一、摘要 项目一般会有个描述文件&#xff0c;对于项目的代码来讲&#xff0c;这个描述就是README.md文件&#xff0c;可以描述各模块功能、目录结构等。该文件可以方便让人快速了解项目的代码结构和功能。当然&#xff0c;若要深层次的了解项目&#xff0c;就得看项目总体的需…
阅读更多...
GitHub上README.md编写教程（基本语法）

GitHub上README.md编写教程（基本语法）

主要参考&#xff1a;GitHub上README.md编写教程&#xff08;基本语法&#xff09;_无名的一棵小树-CSDN博客_readme.md语法 一、标题写法&#xff1a; 第一种方法&#xff1a;标题文本下方加“”号或“--”号 1、在文本下面加上等于号“” &#xff0c;那么上方的文本就变成…
阅读更多...
README.md文件

README.md文件

引言&#xff1a; README.md文件用的是Markdown编写的&#xff0c;所有我们先来看看Markdown的语法 首先在github上面某个项目里面创建一个README.md,然后在里面区编辑内容&#xff0c;如图&#xff0c; 点击edit file在下面输入内容&#xff0c;然后切换到preview changes进…
阅读更多...
推荐文章

Copyright @ 2022~2023