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

article/2025/11/10 10:15:29

本次轮播效果图如下：

具有以下功能：1.自动播放（鼠标进入显示区域时停止播放） 2.左右焦点切换  3.底下小按钮切换

ps:由于很多同志反馈无法总有各种奇怪的情况，所以有需要的直接下载整个工程：JS实现图片轮播效果

以下为实现代码：

首先是html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>最简单的轮播效果</title>
</head>
<body>
<div class="box" id="box"><div class="inner"><!--轮播图--><ul><li><a href="#"><img src="images/1.jpg" alt=""></a></li><li><a href="#"><img src="images/2.jpg" alt=""></a></li><li><a href="#"><img src="images/3.jpg" alt=""></a></li><li><a href="#"><img src="images/4.jpg" alt=""></a></li><li><a href="#"><img src="images/5.jpg" alt=""></a></li></ul><ol class="bar">小按钮数量无法确定，由js动态生成</ol><!--左右焦点--><div id="arr"><span id="left"> <</span><span id="right">></span></div></div>
</div></body>
</html>
 

接下来是css样式：

<style>* {margin: 0;padding: 0}.box {width: 500px;height: 300px;border: 1px solid #ccc;margin: 100px auto;padding: 5px;}.inner{width: 500px;height: 300px;position: relative;overflow: hidden;}.inner img{width: 500px;height: 300px;vertical-align: top}ul {width: 1000%;position: absolute;list-style: none;left:0;top: 0;}.inner li{float: left;}ol {position: absolute;height: 20px;right: 20px;bottom: 20px;text-align: center;padding: 5px;}ol li{display: inline-block;width: 20px;height: 20px;line-height: 20px;background-color: #fff;margin: 5px;cursor: pointer;}ol .current{background-color: red;}#arr{display: none;}#arr span{width: 40px;height: 40px;position: absolute;left: 5px;top: 50%;margin-top: -20px;background: #fff;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: '黑体';font-size: 30px;color: #000;opacity: 0.5;border: 1px solid #fff;}#arr #right {right: 5px;left: auto;}

第三部分是最主要的js代码：

<script>/**** @param id  传入元素的id* @returns {HTMLElement | null}  返回标签对象，方便获取元素*/function my$(id) {return document.getElementById(id);}//获取各元素，方便操作var box=my$("box");var inner=box.children[0];var ulObj=inner.children[0];var list=ulObj.children;var olObj=inner.children[1];var arr=my$("arr");var imgWidth=inner.offsetWidth;var right=my$("right");var pic=0;//根据li个数，创建小按钮for(var i=0;i<list.length;i++){var liObj=document.createElement("li");olObj.appendChild(liObj);liObj.innerText=(i+1);liObj.setAttribute("index",i);//为按钮注册mouseover事件liObj.onmouseover=function () {//先清除所有按钮的样式for (var j=0;j<olObj.children.length;j++){olObj.children[j].removeAttribute("class");}this.className="current";pic=this.getAttribute("index");animate(ulObj,-pic*imgWidth);}}//设置ol中第一个li有背景颜色olObj.children[0].className = "current";//克隆一个ul中第一个li,加入到ul中的最后=====克隆ulObj.appendChild(ulObj.children[0].cloneNode(true));var timeId=setInterval(onmouseclickHandle,1000);//左右焦点实现点击切换图片功能box.onmouseover=function () {arr.style.display="block";clearInterval(timeId);};box.onmouseout=function () {arr.style.display="none";timeId=setInterval(onmouseclickHandle,1000);};right.onclick=onmouseclickHandle;function onmouseclickHandle() {//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,//所以,如果用户再次点击按钮,用户应该看到第二个图片if (pic == list.length - 1) {//如何从第6个图,跳转到第一个图pic = 0;//先设置pic=0ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置}pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,if (pic == list.length - 1) {//第五个按钮颜色干掉olObj.children[olObj.children.length - 1].className = "";//第一个按钮颜色设置上olObj.children[0].className = "current";} else {//干掉所有的小按钮的背景颜色for (var i = 0; i < olObj.children.length; i++) {olObj.children[i].removeAttribute("class");}olObj.children[pic].className = "current";}}left.onclick=function () {if (pic==0){pic=list.length-1;ulObj.style.left=-pic*imgWidth+"px";}pic--;animate(ulObj,-pic*imgWidth);for (var i = 0; i < olObj.children.length; i++) {olObj.children[i].removeAttribute("class");}//当前的pic索引对应的按钮设置颜色olObj.children[pic].className = "current";};//设置任意的一个元素,移动到指定的目标位置function animate(element, target) {clearInterval(element.timeId);//定时器的id值存储到对象的一个属性中element.timeId = setInterval(function () {//获取元素的当前的位置,数字类型var current = element.offsetLeft;//每次移动的距离var step = 10;step = current < target ? step : -step;//当前移动到位置current += step;if (Math.abs(current - target) > Math.abs(step)) {element.style.left = current + "px";} else {//清理定时器clearInterval(element.timeId);//直接到达目标element.style.left = target + "px";}}, 10);}
</script>

所有用图片如下：

1.jpg

2.jpg

3.jpg

4.jpg

5.jpg

下面是完整的代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>最简单的轮播效果</title><style>* {margin: 0;padding: 0}.box {width: 500px;height: 300px;border: 1px solid #ccc;margin: 100px auto;padding: 5px;}.inner{width: 500px;height: 300px;position: relative;overflow: hidden;}.inner img{width: 500px;height: 300px;vertical-align: top}ul {width: 1000%;position: absolute;list-style: none;left:0;top: 0;}.inner li{float: left;}ol {position: absolute;height: 20px;right: 20px;bottom: 20px;text-align: center;padding: 5px;}ol li{display: inline-block;width: 20px;height: 20px;line-height: 20px;background-color: #fff;margin: 5px;cursor: pointer;}ol .current{background-color: red;}#arr{display: none;}#arr span{width: 40px;height: 40px;position: absolute;left: 5px;top: 50%;margin-top: -20px;background: #fff;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: '黑体';font-size: 30px;color: #000;opacity: 0.5;border: 1px solid #fff;}#arr #right {right: 5px;left: auto;}</style>
</head>
<body>
<div class="box" id="box"><div class="inner"><!--轮播图--><ul><li><a href="#"><img src="images/1.jpg" alt=""></a></li><li><a href="#"><img src="images/2.jpg" alt=""></a></li><li><a href="#"><img src="images/3.jpg" alt=""></a></li><li><a href="#"><img src="images/4.jpg" alt=""></a></li><li><a href="#"><img src="images/5.jpg" alt=""></a></li></ul><ol class="bar"></ol><!--左右焦点--><div id="arr"><span id="left"><</span><span id="right">></span></div></div>
</div>
<script>/**** @param id  传入元素的id* @returns {HTMLElement | null}  返回标签对象，方便获取元素*/function my$(id) {return document.getElementById(id);}//获取各元素，方便操作var box=my$("box");var inner=box.children[0];var ulObj=inner.children[0];var list=ulObj.children;var olObj=inner.children[1];var arr=my$("arr");var imgWidth=inner.offsetWidth;var right=my$("right");var pic=0;//根据li个数，创建小按钮for(var i=0;i<list.length;i++){var liObj=document.createElement("li");olObj.appendChild(liObj);liObj.innerText=(i+1);liObj.setAttribute("index",i);//为按钮注册mouseover事件liObj.onmouseover=function () {//先清除所有按钮的样式for (var j=0;j<olObj.children.length;j++){olObj.children[j].removeAttribute("class");}this.className="current";pic=this.getAttribute("index");animate(ulObj,-pic*imgWidth);}}//设置ol中第一个li有背景颜色olObj.children[0].className = "current";//克隆一个ul中第一个li,加入到ul中的最后=====克隆ulObj.appendChild(ulObj.children[0].cloneNode(true));var timeId=setInterval(onmouseclickHandle,1000);//左右焦点实现点击切换图片功能box.onmouseover=function () {arr.style.display="block";clearInterval(timeId);};box.onmouseout=function () {arr.style.display="none";timeId=setInterval(onmouseclickHandle,1000);};right.onclick=onmouseclickHandle;function onmouseclickHandle() {//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,//所以,如果用户再次点击按钮,用户应该看到第二个图片if (pic == list.length - 1) {//如何从第6个图,跳转到第一个图pic = 0;//先设置pic=0ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置}pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,if (pic == list.length - 1) {//第五个按钮颜色干掉olObj.children[olObj.children.length - 1].className = "";//第一个按钮颜色设置上olObj.children[0].className = "current";} else {//干掉所有的小按钮的背景颜色for (var i = 0; i < olObj.children.length; i++) {olObj.children[i].removeAttribute("class");}olObj.children[pic].className = "current";}}left.onclick=function () {if (pic==0){pic=list.length-1;ulObj.style.left=-pic*imgWidth+"px";}pic--;animate(ulObj,-pic*imgWidth);for (var i = 0; i < olObj.children.length; i++) {olObj.children[i].removeAttribute("class");}//当前的pic索引对应的按钮设置颜色olObj.children[pic].className = "current";};//设置任意的一个元素,移动到指定的目标位置function animate(element, target) {clearInterval(element.timeId);//定时器的id值存储到对象的一个属性中element.timeId = setInterval(function () {//获取元素的当前的位置,数字类型var current = element.offsetLeft;//每次移动的距离var step = 10;step = current < target ? step : -step;//当前移动到位置current += step;if (Math.abs(current - target) > Math.abs(step)) {element.style.left = current + "px";} else {//清理定时器clearInterval(element.timeId);//直接到达目标element.style.left = target + "px";}}, 10);}
</script>
</body>
</html>

 


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

相关文章

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…
阅读更多...
mysql创建学生表命令_用sql语句创建学生表如何做

mysql创建学生表命令_用sql语句创建学生表如何做

在数据库中使用SQL语句创建学生表代码如下&#xff1a;( 学号 char(12) primary key, 姓名 char(6) not null, 性别 char(2) check(性别 IN (男,女)), 班级 char(15) ) 相关表的创建&#xff1a;create table 成绩表 ( 学号 char(12)references 学生表(学号), 课程号 char(2)re…
阅读更多...
SQL的学习学生表

SQL的学习学生表

1.创建数据库 create database school; 2.创建学生表&#xff0c;成绩表&#xff0c;课程表 create table student( Sno int primary key not null, Sname varchar(20) not null, Ssex varchar(2) null, Birthday datetime null, Sdept varchar(20) null);create table course(…
阅读更多...
学生表

学生表

创建 1.学生表 Student(SID,Sname,Sage,Ssex) --SID 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别 2.课程表 Course(CID,Cname,TID) --CID --课程编号,Cname 课程名称,TID 教师编号 3.教师表 Teacher(TID,Tname) --TID 教师编号,Tname 教师姓名 4.成绩表 SC(SID,CID,s…
阅读更多...
学生表 成绩表 课程表 教师表

学生表 成绩表 课程表 教师表

学生表&#xff1a; Student(s_id,s_name,s_birth,s_sex) –学生编号,学生姓名, 出生年月,学生性别 课程表&#xff1a; Course(c_id,c_name,t_id) – –课程编号, 课程名称, 教师编号 教师表&#xff1a; Teacher(t_id,t_name) –教师编号,教师姓名 成绩表&#xff1a; Score(…
阅读更多...
MySQL基础 创建学生表实现查询基础功能

MySQL基础 创建学生表实现查询基础功能

一. 创建学生表 1.进入MySQL WIN R 输入cmd 输入mysql -u root -p 输入密码进入mysql 2. 输入show databases; 查询现有数据库 选择一个数据库 use 数据库名称 创建一个学生表 create table stu( id int ,-- 编号 name varchar(10),-- 姓名 gender char(1)…
阅读更多...
数据库学生表

数据库学生表

文章目录 学生表建立学生表&#xff1a;建表过程中出现的错误&#xff1a; 插入数据 课程表建立课程表&#xff1a;插入数据 选课表建立选课表插入数据建表过程中出现的错误&#xff1a; 修改基本表增加属性列&#xff1a;修改数据类型&#xff1a;增加约束条件&#xff1a;删除…
阅读更多...
LDA理解

LDA理解

LDA 过程&#xff1a; 希拉里邮件lda建模&#xff1a;
阅读更多...
LDA步骤

LDA步骤

自己学习备忘用。节选自(1条消息) LDA原理小结_Sual-CSDN博客_lda原理
阅读更多...
NLP： LDA主题模型

NLP： LDA主题模型

Essence本质&#xff1a;LDA模型主要包括主题分布θ和词语分布&#xff0c; 主题分布&#xff1a;各个主题在文档中出现的概率分布。词语分布&#xff1a;各个词语在某个主题下出现的概率分布。 pLSA模型中这两个分布是固定的&#xff0c;由期望最大化EM(Expectation Maximiz…
阅读更多...
LDA算法

LDA算法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、LDA是什么&#xff1f;二、公式推导三、PCA和LDA的区别总结 前言 线性判别分析&#xff08;LDA&#xff09;是一种有监督学习算法&#xff0c;同时经常被用…
阅读更多...
自然语言处理7——LDA

自然语言处理7——LDA

文章目录 1. PLSA、共轭先验分布&#xff1b;LDA主题模型原理1.1 PLSA1.2 共轭先验分布1.2.1 共轭先验分布的参数确定1.2.2 常见的共轭先验分布 1.3 LDA主题模型原理 2. LDA应用场景3. LDA优缺点4. LDA 在sklearn中的参数学习5. 使用LDA生成主题特征&#xff0c;在之前特征的基…
阅读更多...
推荐文章

Copyright @ 2022~2023