如何用JS实现轮播图！

article/2025/11/10 9:06:21

轮播图

1.思路与写法

1.1 首先我们拿到一个关于轮播图的实例我们要分析里面的功能，将其模块化处理；

1.2 首先需要实现的是自动轮播的效果：
1.2.1需要用到运动函数框架，startMove()，还需要用到定时器，这里我们用的是多次调用的延时定时器达到效果；
1.2.2对dom元素的操作，获取它的样式；

1.3其次实现上下按钮实现上一页和下一页的切换，对其绑定鼠标点击事件，同时需要获取该元素的节点；

1.4最后实现底部的小圆圈的固定切换，需要对其绑定鼠标点击事件，这里用到获取该元素的节点，利用排他思想改变样式实现动态切换！

2.结果示意图：

（如图是鼠标点击状态和点击底部小圆点以及自动轮播效果，图片大小有限制就没能展示太长！！！）
在这里插入图片描述

3.参考代码：

html部分：

<!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><!-- 引用外部css样式 --><link rel="stylesheet" href="../css/index.css"><!-- 引用外部运动函数js文件，这里需要注意的就是一定要放到下一个js引用的前面 --><script src="../js/index01.js"></script><!-- 引用外部js文件 --><script src="../js/index.js"></script>
</head>
<body><div class="father"><ul class="one"><li class="son1"><img src="../image/1.jpg" alt=""></li><li class="son2"><img src="../image/2.jpg" alt=""></li><li class="son3"><img src="../image/3.jpg" alt=""></li><li class="son4"><img src="../image/4.jpg" alt=""></li><li class="son5"><img src="../image/5.jpg" alt=""></li><li class="son6"><img src="../image/6.jpg" alt=""></li><li class="son7"><img src="../image/1.jpg" alt=""></li></ul><button class="btn1">&lt;</button><button class="btn2">&gt;</button><div class="two"><span class="active"></span><span></span><span></span><span></span><span></span><span></span></div></div>
</body>
</html>

js部分1（运动函数）：

function startMove(dom, attrObj,callback) {clearInterval(dom.timer)var iSpeed = null,iCur = null;dom.timer = setInterval(function () {var bStop = true;for (var attr in attrObj) {if (attr == "opacity") {iCur = parseFloat(getStyle(dom, attr)) * 100} else {iCur = parseFloat(getStyle(dom, attr))}iSpeed = (attrObj[attr] - iCur) / 7;iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed)if (attr == "opacity") {dom.style.opacity = (iCur + iSpeed) / 100} else {dom.style[attr] = iCur + iSpeed + "px"}if(iCur != attrObj[attr]){bStop = false}}if(bStop){clearInterval(dom.timer)typeof callback == "function" && callback()}}, 30)}function getStyle(dom,attr){if(window.getComputedStyle){return window.getComputedStyle(dom,null)[attr]}else{return dom.currentStyle[attr]}}

js部分2（对页面元素进行操作）：

window.onload=function(){var lock=true;var one=document.getElementsByTagName("ul")[0] // console.log(one);var moveWidth=one.children[0].offsetWidth; //移动的距离为400px,固定值var num=one.children.length-1              //每张图片的长度var index=0;var oSpanArray=document.getElementsByTagName("span")// console.log(oSpanArray);// 获取左右按钮var btn1=document.getElementsByTagName("button")[0]var btn2=document.getElementsByTagName("button")[1]// console.log(btn1,btn2);// 绑定点击事件btn1.onclick=function(){autoMove("pre")}btn2.onclick=function(){autoMove("next")}// 自动轮播var timer=null;//定时器调用函数// timer=setInterval(autoMove,2500)timer=setTimeout(autoMove,2500)function autoMove(direction){if(lock){lock=false;clearTimeout(timer);// 调用缓冲运动函数// console.log(direction);//定时器自动轮播和按钮下一页的功能一样可以一起写如下做一个判断if(!direction || direction=="next"){index ++;// 调用运动函数实现自动轮播和下一页切换startMove(one,{left:one.offsetLeft-moveWidth},function(){//当ul距离father左边宽度为-1600的时候，将最后一张图片切换为第一张图片if(one.offsetLeft==-num*moveWidth){console.log(one);one.style.left="0px"index=0;}// 调用延时定时器timer=setTimeout(autoMove,2500);lock=true;changeIndex(index);})   // 再次调用运动函数和定时器实现上一页切换}else if(direction=="pre"){// 判断第一张的情况下，将第一张切换为最后一张图片if(one.offsetLeft==0){one.style.left=-num*moveWidth+"px"index=num;}// 同理调用运动函数实现上一页的切换startMove(one,{left:one.offsetLeft+moveWidth},function(){timer=setTimeout(autoMove,2500)lock=true;changeIndex(index)})} }}// 封装一个函数实现底下小圆圈样式颜色改变，排他思想，同时要获取当前小圆圈类数组下标function changeIndex(_index){for(var i=0;i<oSpanArray.length;i++){// 遍历一遍底下6个小圆点，消除所以小圆点样式oSpanArray[i].className=""}// console.log(_index);// 保留自己的样式，剔除其他人留下我一个oSpanArray[_index].className="active"}   // 遍历每一个小圆点，依次绑定点击事件for(var i=0;i<oSpanArray.length;i++){// 消除变量提升导致对i值得影响(function(myindex){oSpanArray[i].onclick=function(){lock=false;clearTimeout(timer)// 调用运动函数// 实现将小圆圈类数组的下标值*对应的移动的宽度赋值给要移动的距离点startMove(one,{left:-myindex*moveWidth},function(){lock=true;timer=setTimeout(autoMove,2500)changeIndex(myindex)})}})(i)}}

css部分：

*{margin: 0px;padding: 0px;
}
.father{width: 400px;height: 400px;/* border: 1px solid red; */overflow: hidden;margin: 200px auto;position: relative;}
.father .one{width: 2800px;height: 100%;/* border: 1px solid black; */margin-top: 0px;/* margin-left: -40px; */position: absolute;left: 0;top: 0;
}
.father .one li{list-style: none;width: 400px;height: 100%;float: left;}
.father .one li img{width: 400px;height: 100%;}
button{width: 40px;height: 40px;background-color: black;opacity: 0.2;color: white;text-align: center;line-height: 40px;font-size: 30px;position: absolute;top: 50%;}
.father:hover button{opacity: 0.7;
}
.father .btn1{left: 0px;
}
.father .btn2{right: 0px;
}
.father .two{width: 100%;height: 50px;/* background-color: blue; */position: absolute;bottom: 10px;text-align: center;line-height: 60px;
}
.father .two span{display: inline-block;width: 18px;height: 18px;border: 1px solid black;margin-left: 3px;border-radius: 50%;  
}
.father .two .active{background-color: brown;
}

4.总结：

了解到轮播图的原理后，进行模块儿化处理的时候写很简单，可以实现单个模块比如：自动轮播、上下页的切换、小圆圈固定切换，这些功能单独写出来很容易，写到一起的时候会出现很多bug，这就要考虑到多个定时器的同时进行产生的影响，所以要及时在特定的时候清楚定时器来消除影响，（代码量可以精简，欢迎大家可以多多提意见！）


http://chatgpt.dhexx.cn/article/2rFii3Y7.shtml

相关文章

javascript图片轮播技术动态实现

javascript图片轮播技术动态实现

我们经常会在网页中见到轮播的图片&#xff0c;如京东主页面中图片自动更换。我们在这里对这一技术进行实现&#xff0c;主要能够使图片自动进行轮播&#xff0c;数字标签随着图片一同更换&#xff0c;鼠标移动到数字标签上&#xff0c;相应的图片停留&#xff0c;鼠标在整个图…
阅读更多...
JS——实现轮播图（完整功能）

JS——实现轮播图（完整功能）

没有把细节单拎出来讲&#xff0c;但基本上所有重要步骤都在代码里边备注解释了~~ 个人认为比较难的地方就是&#xff1a; 怎么在自动播放到最后一张图片后&#xff0c;瞬间切换回第一张图片重新播放&#xff1f; 这里采用了比较取巧的方法&#xff0c;比如我用了四张例图&a…
阅读更多...
Js实现图片点击切换与轮播

Js实现图片点击切换与轮播

Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html><head> <meta charset"UTF-8"><title></title><script type"text/javascript">window.onloadfunction(){var btn1document.getElementById("…
阅读更多...
原生JS-实现无限图片轮播

原生JS-实现无限图片轮播

实现思路&#xff1a; 一、布局部分&#xff1a; 1、采用div>ul>li>img布局&#xff0c;来展示轮播的图片banner; 2、采用div>>ul>li>a标签&#xff0c;来显示小红点&#xff1b; 整个布局入下图所示&#xff1a;途中的&#xff0c;图中的第一个li和最后一…
阅读更多...
HTML网页js超简单实现图片轮播

HTML网页js超简单实现图片轮播

其实实现图片轮播很简单 1. 创建一个js文件&#xff08;自己会的博主不多说&#xff09; 2. 在html文件引入js文件 引入代码&#xff1a; <script type"text/javascript" src"js/sth.js"></script> 注意&#xff1a;sth是自己的js文件名自行…
阅读更多...
JS实现图片轮播（方法一）

JS实现图片轮播（方法一）

效果如下&#xff1a; 下面是具体的实现代码&#xff1a; HTML代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…
阅读更多...
js实现图片自动轮播

js实现图片自动轮播

今天有人问我这个问题&#xff0c;我就顺便把这个记下来&#xff0c;分享给大伙。 如图&#xff0c;就是图片自己轮播&#xff0c;并且图中中下方的白点也发生变化&#xff0c;图片到哪&#xff0c;白点就到哪&#xff0c;就直接上代码了 <!DOCTYPE html PUBLIC "-//W3…
阅读更多...
js图片轮播效果实现代码

js图片轮播效果实现代码

这篇文章主要介绍了js图片轮播效果实现代码&#xff0c;文章对每一步进行了详细阐述&#xff0c;标注注意事项&#xff0c;为顺利实现js图片轮播效果做好铺垫&#xff0c;对轮播效果感兴趣的朋友可以参考一下 首先给大家看一看js图片轮播效果&#xff0c;如下图 具体思路&#…
阅读更多...
Javascript实现图片轮播效果。

Javascript实现图片轮播效果。

用js做一个简单的图片轮播效果。 思路如下：用JavaScript来控制轮播的图片的样式（margin-left）。用计时器来控制图片的自动播放。鼠标点击控制图片的翻页。 效果图如下。具有以下功能：1.自动图片轮播 2.左右切换图片 3.底下小按钮切换图片。 话不多说，代码如下。 首先肯定是…
阅读更多...
JavaScript 实现图片轮播

JavaScript 实现图片轮播

今天给大家介绍下怎么用 JS 实现图片轮播效果。 原理描述&#xff1a; 使用JS实现轮播的原理是这样的&#xff1a; 假设初始的情况&#xff0c;下图一个网格代表一个图&#xff0c;初始时&#xff0c;显示1 &#xff1a; 当进行一次轮播后&#xff0c;显示变为下图 显示2&…
阅读更多...
JavaScript实现图片自动轮播

JavaScript实现图片自动轮播

目录 1.轮播图片 1.1图片切换功能 1.2定时器功能 1.3图片自动轮播实现 2.页面定时弹出广告 2.2 技术分析 2.3步骤分析 2.4代码实现 3.表单校验 3.1需求分析 3.2技术分析 3.3校验邮箱 3.3.1从外部引入js文件&#xff08;一些匹配函数&#xff09; JS&#xff1a;是…
阅读更多...
html js简单实现图片轮播功能

html js简单实现图片轮播功能

本章记录简单的图片轮播功能&#xff0c;需要html、js和css共同实现1、html文件<!DOCTYPE html> <html><head><meta charset"UTF-8"><link rel"stylesheet" type"text/css" href"css/text.css"/><sc…
阅读更多...
js轮播图 最简单代码

js轮播图 最简单代码

js轮播图 最简单代码 今天来分享一篇js最简单轮播图轮播图&#xff0c;用最简单的代码实现&#xff1a; 首先&#xff0c;建立一个HTML文件&#xff0c;插入img标签&#xff0c;这里我们定义图片id为pic 然后使用document.getElementByid()获取img标签的id&#xff0c;并且定…
阅读更多...
html+css+js实现图片轮播

html+css+js实现图片轮播

html代码 原理是通过 overflow: hidden; 将ul的宽带属性设置为轮播图片的个数*100%&#xff0c;从而这个属性来使得div中只充斥 一个li&#xff1b;通过js让margin-left的值改变来实现图片轮播&#xff1b; <body><div class"warp"><div class"…
阅读更多...
JS实现图片轮播效果（自动和手动）

JS实现图片轮播效果（自动和手动）

本次轮播效果图如下&#xff1a; 具有以下功能&#xff1a;1.自动播放&#xff08;鼠标进入显示区域时停止播放&#xff09; 2.左右焦点切换 3.底下小按钮切换 ps:由于很多同志反馈无法总有各种奇怪的情况&#xff0c;所以有需要的直接下载整个工程&#xff1a;JS实现图片轮…
阅读更多...
JS实现轮播图

JS实现轮播图

在css使用动画可以实现简单的轮播图&#xff0c;但如今已经学习了JS&#xff0c;用JS来写轮播图更加方便快捷。今天就带着大家来实现轮播图。话不多说我们直接看代码&#xff1a; 这是css部分&#xff0c;进行了简单的样式操作接下来就进入js阶段&#xff1a; 运行结果如下&…
阅读更多...
JS实现轮播图（一看就懂逻辑清晰）

JS实现轮播图（一看就懂逻辑清晰）

轮播图有很多种实现方法&#xff0c;这是其中一种最清晰的方法。思路很清晰&#xff0c;代码很简单&#xff0c;欢迎大佬多指教。 先来看下效果图&#xff0c;嫌麻烦就不用具体图片来实现了&#xff0c;主要是理清思路。&#xff08;自动轮播&#xff0c;左右按钮切换图片&…
阅读更多...
JS实现轮播图的三种简单方法。

JS实现轮播图的三种简单方法。

Js实现轮播图01 实现思路 这可能是轮播图最简单点的实现之一&#xff0c;通过更改图片的src来实现该效果&#xff0c;首先需要将图片命名格式统一比如pic01.jpg&#xff0c;pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下&…
阅读更多...
JS实现轮播图的三种简单方法

JS实现轮播图的三种简单方法

01、JS轮播图实现1 实现思路这可能是轮播图最简单点的实现之一&#xff0c;通过更改图片的src来实现该效果&#xff0c;首先需要将图片命名格式统一比如pic01.jpg&#xff0c;pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下&…
阅读更多...
Mysql联表查询（学生表、教师表、成绩表、课程表）

Mysql联表查询（学生表、教师表、成绩表、课程表）

文章目录 1 建库语句2 建表语句3 插入测试数据4 常见查询问题 1 建库语句 create database if not exists studentinfo character set utf8mb4;2 建表语句 一个学生可以选多门课程&#xff0c;一个课程下也对应多个学生&#xff0c;所以需要一个关系表&#xff08;student_cou…
阅读更多...
推荐文章

Copyright @ 2022~2023