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

article/2025/11/10 9:10:47
实现思路：
一、布局部分：
1、采用div>ul>li>img布局，来展示轮播的图片banner;
2、采用div>>ul>li>a标签，来显示小红点；

               整个布局入下图所示：途中的，图中的第一个li和最后一个li标签是用来做动画过渡时使用，就不会产生空白抖动的情况，这个两个图，暂时称之为“站位图”



二、JS代码部分
1、先处理好左右（上一张，下一张）两个按钮的点击事件，点击之后，能够正常的切换当前图片；
2、在图片切换之后，控制相对应的圆点标签，高亮显示当前图片对应的圆点；
3、在1中的切换图片里面添加动画效果；
4、开启轮播定时器，每隔两秒执行一次，调用“下一张按钮”的onclick；
5、如果当前轮播定时器或者动画效果定时器正在执行，点击了“下一张按钮”，会产生时间冲突，所以在，每次点击“下一张/上一张按钮”的时候，清掉所有的动画，并且让当前索引的图片完整的（沾满整个屏幕），显示在界面上
6、给圆点标签，添加onmouseover和out事件；

实现部分：
1、html文件： 
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">ul{margin: 0px;padding: 0px;}ul li{float: left;list-style: none;margin: 0px;padding: 0px;}a{margin: 0px;padding: 0px;}#wrapper{margin: 0 auto;width: 1280px;height: 800px;position: relative;}#imgs{width: 1280px;height: 100%;overflow: hidden;float: left;position: relative;}#imgs ul{position: absolute;z-index: 1;width: 7680px;height: 400px;left: -1280px;}#nav{width: 100px;height: 20px;float: left;position: absolute;right: 10px;bottom: 10px;z-index: 5;}#nav ul li a{width: 20px;height: 20px;line-height: 20px;display: inline-block;background: #FFF;border-radius: 10px;margin-right: 5px;text-align: center;font-size: 12px;}#preous,#next{width: 100px;background: #000;font-size: 20px;font-weight: 900;text-align: center;height: 80px;line-height: 80px;position: absolute;top: 50%;color: #FFF;z-index: 3;}#preous{left: 0px;}#next{right: 0px;}#nav ul li a.current{background: red;color: #FFF;}#nav ul li a.hidden{background: #FFF;color: #000;}</style>
</head>
<body><div id="wrapper"><div id="imgs"><ul><li><a href=""><img src="../image/4.jpg" alt=""></a></li><li><a href=""><img src="../image/1.jpg" alt=""></a></li><li><a href=""><img src="../image/2.jpg" alt=""></a></li><li><a href=""><img src="../image/3.jpg" alt=""></a></li><li><a href=""><img src="../image/4.jpg" alt=""></a></li><li><a href=""><img src="../image/1.jpg" alt=""></a></li></ul></div><div class="clear"></div><div id="nav"><ul><li><a class="current">1</a></li><li><a>2</a></li><li><a>3</a></li><li><a>4</a></li></ul></div><div id="preous"><</div><div id="next">></div></div>
</body>
</html>

在静态页当中，需要注意：
1、给图片轮播的ul外层的div标签，设置为一张图片的宽度（我这是1280px）,并且设置溢出的不显示
2、给图片轮播的ul标签的宽度必须为li标签的总数*每张的宽度（我这是6*1280）
3、圆点标签的div，设置的z-index必须必图片轮播的div优先级要高


二、JS业务逻辑部分
     获取到所有需要操作的对象 
     获取到所有需要操作的对象var imgs_div=document.getElementById("imgs");var nav_div=document.getElementById("nav");//获取到图片轮播的ul对象数组var imgsUl=imgs_div.getElementsByTagName("ul")[0];//获取到远点的ul对象数组var nav=nav_div.getElementsByTagName("ul")[0];//上一个var prious=document.getElementById("preous");//下一个var next =document.getElementById("next");
1、先处理好左右（上一张，下一张）两个按钮的点击事件，点击之后，能够正常的切换当前图片； 

      prious.οnclick=function(){//上一张，图片需要向右移动，（X轴正轴方向），所以加1280var offset=parseInt(imgsUl.offsetLeft)+1280;imgsUl.style.left=offset+"px";}next.οnclick=function(){//下一张，图片像左移动，（X轴负轴方向），所以减1280var offset=parseInt(imgsUl.offsetLeft)-1280;imgsUl.style.left=offset+"px";}


   如图所示：当前在用户界面上可见的为li的第一张图，如果我点击了“下一个”， 那么整个ul标签需要像左滑动一个图片宽度的单位（1280px）,于是成了下图：

     2、在图片切换之后，控制相对应的圆点标签，高亮显示当前图片对应的圆点：

   这里封装一个函数，首先让圆点li标签的所有class都变成hidden, 然后在通过传进来的下标在减去1，则是当前可见的li标签：

          var index=1;//表示默认当前就是展示的第一张图片prious.οnclick=function(){//上一张，图片需要向右移动，（X轴正轴方向），所以加1280var offset=parseInt(imgsUl.offsetLeft)+1280;imgsUl.style.left=offset+"px";//这里需要判断当前的下标是否小于1，小于了，则说明现在当前是第一张图片，再返回，就是要到第四张图片，让index=4，每次点击之后让index的值减1if(index<1){index=4;}index-=1; btnShow（index）；}next.οnclick=function(){//下一张，图片像左移动，（X轴负轴方向），所以减1280var offset=parseInt(imgsUl.offsetLeft)-1280;imgsUl.style.left=offset+"px";//这里需要判断当前的下标是否大于4，大于了，则说明现在当前是第四张图片，再返下一张，就是要到第一张图片，让index=1，每次点击之后让index的值+1if(index>4){index=1;}index+=1;btnShow（index）；               }function btnShow(cur_index){var list=nav.children;for(var i=0;i<nav.children.length;i++){nav.children[i].children[0].className="hidden";}nav.children[cur_index-1].children[0].className="current";}

3、在1中的切换图片里面添加动画效果：
          在animate函数中，对newLeft(总偏移量)进行判断，如果大于-1280px;说明当前展示的是第一张图片，现在需要改成展示第四张图片，（第四张图片的left值为-1280*4 px）；
如果小于-5120px,说明当前展示的是第四张图片，现在需要改成展示第一张图片（第一张图片的left值为：-1280px）； 
       var animTimer;prious.οnclick=function(){index-=1;if(index<1){index=4;}animate(1280);btnShow(index);}next.οnclick=function(){initImgs(index);index+=1;if(index>4){index=1;}animate(-1280);btnShow(index);}function animate(offset){var newLeft=parseInt(imgsUl.offsetLeft)+offset;if(newLeft>-1280){donghua(-5120);    }else if(newLeft<-5120){donghua(-1280);    }else{donghua(newLeft);}}function donghua(offset){clearInterval(animTimer);animTimer=setInterval(function(){//动画原理： 盒子本身的位置 + 步长imgsUl.style.left=imgsUl.offsetLeft+(offset-imgsUl.offsetLeft)/10 + "px";//因为采用的动画原理计算方法，得到的值不可能精确到我们需要偏移的像素单位上，所以我这里判断，在还有20px的时候，就让动画停止。if(imgsUl.offsetLeft-offset<10&&imgsUl.offsetLeft-offset>-10){imgsUl.style.left=offset+"px";clearInterval(animTimer);        }},20);}
 4、开启轮播定时器，每隔两秒执行一次，调用“下一张按钮”的onclick； 

          var timer;function play(){timer=setInterval(function(){next.onclick();},2000)}

5、如果当前轮播定时器或者动画效果定时器正在执行，点击了“下一张按钮”，会产生时间冲突，所以在，每次点击“下一张/上一张按钮”的时候，清掉所有的动画，并且让当前索引的图片完整的（沾满整个屏幕），显示在界面上 

         //其中cur_index，表示是当前图片的index值；function initImgs(cur_index){clearInterval(timer);clearInterval(animTimer);var off=cur_index*1280;imgsUl.style.left=-off+"px";}
6、给圆点标签，添加onmouseover和out事件；

          在onmouseover中，因为圆点标签的下标是从0开始的， 而图片轮播的下标的第一张图，我们在开始的时候默认定义为1，所以在调用其他函数的时候，传递过去的i+1

          for(var i=0;i<nav.children.length;i++){nav.children[i].index=i;var sd=nav.children[i].index;nav.children[i].οnmοuseοver=function(){var now_index=this.index;//这里很重要，要让当前的图片的index的值等于鼠标选中的图片 index=this.index+1;initImgs(this.index+1);btnShow(this.index+1);}nav.children[i].οnmοuseοut=function(){play();}}


源码地址：https://github.com/townkoim/js-img-lunbo











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

相关文章

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…
阅读更多...
mysql实操《学生表》

mysql实操《学生表》

第一步&#xff0c;创建所需要的的表信息 1.创建学生表和添加所需要的信息 Student(SID,Sname,Sage,Ssex) --SID 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别 添加测试数据1.学生表 insert into Student values(‘01’ , ‘赵雷’ , ‘1990-01-01’ , ‘男’); inser…
阅读更多...
用Mysql设计一张学生表

用Mysql设计一张学生表

mysql> create table student(-> id int,-> name varchar(10),-> gender char(1),-> birthday date,-> score double(5,2),-> email varchar(64),-> status tinyint#最后一行不用加逗号。-> ); Query OK, 0 rows affected (0.02 sec)mysql> desc…
阅读更多...
Java数据库建立学生表

Java数据库建立学生表

Java数据库建立学生表 代码如下&#x1f447;&#x1f447;&#x1f447;&#xff1a; import java.sql.*; //数据库建立学生表 public class Mysql {//数据库名为world&#xff0c;用户名为root&#xff0c;密码为adminprivate static String url "jdbc:mysql://localho…
阅读更多...
mysql建立班级表_mysql数据表设计-班级表 学生表 老师表 课程表 成绩表

mysql建立班级表_mysql数据表设计-班级表 学生表 老师表 课程表 成绩表

mysql数据表设计- 班级表 学生表 老师表 课程表 成绩表 image.png /* Navicat Premium Data Transfer Source Server : localhost Source Server Type : MySQL Source Server Version : 50624 Source Host : localhost Source Database : sqlexam Target Server Type : MySQL T…
阅读更多...
推荐文章

Copyright @ 2022~2023