当前位置： 首页 > news >正文

前端：HTML+CSS+JavaScript实现轮播图2

news 2026/5/20 12:38:50

前端：HTML+CSS+JavaScript实现轮播图2

        • 1. 和之前版本的区别
        • 2. 实现原理
        • 3. 针对上述的改进
        • 3. 参考代码

1. 和之前版本的区别

之前发布的那篇关于轮播图的文章在这：前端：HTML+CSS+JavaScript实现轮播图，只能说存在问题吧！比如2、3实现效果是用了两个定时器实现的，虽然也达到了那种效果，但是从一些方面来说总有点繁琐吧！比如，在一定时间内图片移动像素的计算等。现在这个不需要计算，直接用一个定时器即可实现，我想说现在这个版本和各位在浏览器上看到那种效果实现原理应该差不多。

请添加图片描述
虽然没有给出相应的点击事件哈！

2. 实现原理

利用相对定位relative、绝对定位absolute、定时器、transition
结合relative、absolute来进行图片布局，用定时器来实现图片轮播间隔效果，用transition来实现每张图片移动过渡效果。
在这里插入图片描述
初始实现效果如上，这不符合我们想要的那种效果，这种是通过定时器每隔几秒变化每张图片的left的值的效果。这并不怎么美观，因为图片过渡效果并不符合我们的要求，但是如果显示的有多张图片，那么倒还不错，如下：
在这里插入图片描述

3. 针对上述的改进

在这里插入图片描述
就是把所有图片从左到右进行排列，外层用一个标签元素包裹，每隔一段时间变换外层的标签元素的left属性值。

3. 参考代码

这个是需要改进的代码哈！
main.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href="./main.css">
</head>
<body><div class="main"></div>
</body>
<script type="text/javascript" src="main.js"></script>
</html>

main.css

*{padding: 0;margin: 0;
}ul{list-style: none;
}.main{width: 500px;height: 300px;margin: 0 auto;position: relative;
}.dot{height: 10px;position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);
}.dot span{height: 100%;float: left;width: 10px;border-radius: 50%;margin-left: 10px;cursor: pointer;
}.dot span:first-child{margin-left: 0;
}.red{background-color: red;
}.white{background-color: white;
}.main ul{position: relative;height: 100%;width: 100%;overflow-x: hidden;
}.main ul li{position: absolute;top: 0;transition: all 0.3s;width: 100%;height: 100%;
}.main ul li img{width: 100%;
}

main.js

// 输入图片链接数组
const img_arr = ['https://i0.hdslb.com/bfs/banner/627984a9617a35c7e4366e0c74baf29ef3aa96ae.png@976w_550h_1c_!web-home-carousel-cover.avif','https://i0.hdslb.com/bfs/banner/3464f3b055107b2b54b9443e02c43448c0915866.png@976w_550h_1c_!web-home-carousel-cover.avif','https://i0.hdslb.com/bfs/banner/ff7d11c786ddd45c218696c3c6b19c69a71883d7.jpg@976w_550h_1c_!web-home-carousel-cover.avif','https://i0.hdslb.com/bfs/sycp/creative_img/202311/74214ce12c94ba104322e2be463ec6f7.jpg@976w_550h_1c_!web-home-carousel-cover.avif'
];const mainEle = document.querySelector('.main');
var _htmlStr = '';
img_arr.forEach(function(ele){_htmlStr += `<li><img src="${ele}"></li>`
})var _htmlStr2 = '';
for(let i=0;i<img_arr.length;i++){_htmlStr2 += '<span></span>'
}var _htmlStr2 = `<div class="dot">${_htmlStr2}</div>`;
_htmlStr = `<ul>${_htmlStr}</ul>${_htmlStr2}`;mainEle.innerHTML = _htmlStr;const img_width = 500;const elements = document.querySelectorAll('.main ul li');
const elements2 = document.querySelectorAll('.dot span');
elements.forEach(function(ele,index){ele.style.left = index * img_width + 'px';
})elements2.forEach(function(ele,index){if(index == 0){ele.className = 'red';}else{ele.className =  'white';}
})function left(){elements.forEach(function(ele,index){let left_v = parseFloat(ele.style.left);if(left_v - img_width < 0){ele.style.left = (elements.length - 1) * img_width + 'px';}else{ele.style.left = left_v - img_width + 'px';}if(left_v - img_width == 0){elements2[index].className = 'red';}else{elements2[index].className = 'white';}})
}var timer = setInterval(left,2000);

这个是改进版本
main.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href="./main.css">
</head>
<body><div class="main"><div class="pre_ul" id="main"><ul><li><img src="https://i1.hdslb.com/bfs/archive/da52b26129a84aa316383d53e596d3f89c708294.jpg@672w_378h_1c_!web-home-common-cover.avif" alt=""></li><li><img src="https://i0.hdslb.com/bfs/archive/6df10d7e0834f8511ea620dbfe6bfc7b1eabdab2.jpg@672w_378h_1c_!web-home-common-cover.avif" alt=""></li><li><img src="https://i0.hdslb.com/bfs/archive/47338bc6056b6bbc906155590c6e201ae5dffee8.jpg@672w_378h_1c_!web-home-common-cover.avif" alt=""></li></ul></div><div class="dot" id="main"><span class="red"></span><span class="white"></span><span class="white"></span></div></div>
</body>
<script type="text/javascript" src="main.js"></script>
</html>

main.css

*{margin: 0;padding: 0;
}ul{list-style: none;
}.main{width: 500px;height: 300px;position: relative;margin: 0 auto;overflow-x: hidden;
}.main .dot{position: absolute;bottom: 8%;left: 50%;transform: translateX(-50%);height: 12px;z-index: 2;
}.dot span{float: left;height: 100%;width: 12px;border-radius: 50%;cursor: pointer;margin-left: 8px;
}.dot span:first-child{margin-left: 0;
}.white{background-color: white;
}.red{background-color: red;
}.main .pre_ul{height: 100%;position: absolute;top: 0;left: 0;transition: all 0.5s;z-index: 1;
}.main .pre_ul ul{width: 100%;height: 100%;position: relative;overflow-x: hidden;
}.main .pre_ul ul li{height: 100%;position: absolute;top: 0;left: 0;
}.main .pre_ul ul li img{width: 100%;
}

main.js

const img_width = 500;
// 图片最大宽度
const eles = document.querySelectorAll('.pre_ul ul li');
const pre_ul_ele = document.querySelector('.pre_ul');
const dots = document.querySelectorAll('.dot span');
const n = eles.length;
pre_ul_ele.style.left = 0;
pre_ul_ele.style.width = n * img_width + 'px';
eles.forEach(function(ele,index){ele.style.width = img_width + 'px';ele.style.left = index * img_width + 'px';
})function clear_red(){dots.forEach(function(ele,index){ele.className = 'white';})
}var start_index = 0;function left(){pre_ul_ele.style.transition = 'all 0.5s';let left_v = parseInt(pre_ul_ele.style.left);pre_ul_ele.style.left = left_v - 500 + 'px';clear_red();start_index = (start_index+1)%n;dots[start_index].className = 'red';if(left_v - 500 == -n*img_width){pre_ul_ele.style.left = 0;}
}var timer1 = setInterval(left,2000);

注：上述代码没有给出点击按钮变化图片特效，想实现的读者可以去看看上述第一个关于实现轮播图的版本哈！

相关文章：

前端：HTML+CSS+JavaScript实现轮播图2

前端&#xff1a;HTMLCSSJavaScript实现轮播图2 1. 和之前版本的区别2. 实现原理3. 针对上述的改进3. 参考代码 1. 和之前版本的区别 之前发布的那篇关于轮播图的文章在这&#xff1a;前端&#xff1a;HTMLCSSJavaScript实现轮播图&#xff0c;只能说存在问题吧&#xff01;比…...

编程日记 2023/12/13 3:41:08

使用条件格式突出显示单元格数据-sdk

使用条件格式突出显示单元格数据 2023 年 12 月 6 日 根据数据值将视觉提示应用于特定单元格、行或列&#xff0c;从而更轻松地识别模式和趋势。 网格中的条件格式允许用户根据单元格或范围包含的数据将视觉样式应用于单元格或范围。它通过以数据驱动的方式突出显示关键值、异常…...

编程日记 2023/12/13 3:39:06

java面试题-Dubbo和zookeeper运行原理

远离八股文&#xff0c;面试大白话&#xff0c;通俗且易懂 看完后试着用自己的话复述出来。有问题请指出&#xff0c;有需要帮助理解的或者遇到的真实面试题不知道怎么总结的也请评论中写出来&#xff0c;大家一起解决。 java面试题汇总-目录-持续更新中 分布式注册中心和服务调…...

编程日记 2023/12/13 3:38:05

XSS漏洞 深度解析 XSS_labs靶场

XSS漏洞 深度解析 XSS_labs靶场 0x01 简介 XSS原名为Cross-site Sciprting(跨站脚本攻击)&#xff0c;因简写与层叠样式表(Cascading style sheets)重名&#xff0c;为了区分所以取名为XSS。 这个漏洞主要存在于HTML页面中进行动态渲染输出的参数中&#xff0c;利用了脚本语…...

编程日记 2023/12/13 3:37:04

C++的左值、右值、左值引用和右值引用

目录 左值和右值左值引用右值引用 参考《现代C语言核心特性解析》 以下加粗文字都是摘自本书。 左值和右值 左值和右值得概念在C98就出现了&#xff0c;根据字面意思理解就是&#xff1a;左值是表达式等号左边的值&#xff0c;右值是表达式等号右边的值。 int x 1; int y …...

编程日记 2023/12/13 3:36:04

罗技鼠标使用接收器和电脑重新配对

罗技鼠标使用接收器和电脑重新配对 文章目录 罗技鼠标使用接收器和电脑重新配对1\. 前言2\. 安装软件3\. 进行配对3.1. 取消之前的配对3.2. 重新配对3.3 配对完成 4\. 报错4.1. 重新配对时显示配对未成功 1. 前言 罗技的鼠标出厂的时候&#xff0c;默认的是将通道一设置为接收…...

编程日记 2023/12/13 3:34:02

高项备考葵花宝典-项目进度管理输入、输出、工具和技术(下，很详细考试必过)

项目进度管理的目标是使项目按时完成。有效的进度管理是项目管理成功的关键之一&#xff0c;进度问题在项目生命周期内引起的冲突最多。 小型项目中&#xff0c;定义活动、排列活动顺序、估算活动持续时间及制定进度模型形成进度计划等过程的联系非常密切&#xff0c;可以视为一…...

编程日记 2023/12/13 3:33:01

GumbleSoftmax感性理解--可导式输出随机类别

GumbleSoftmax 本文不涉及GumbleSoftmax的具体证明和推导&#xff0c;有需要请参见1&#xff0c;只是从感性角度来直观讲解为何要引入GumbleSoftmax&#xff0c;同时又为什么不用Gumblemax。 GumbleSoftmax提出是为了应对分布采样不可导的问题。举例而言&#xff0c;我们从网络…...

编程日记 2023/12/13 3:29:59

ROS gazebo 机器人仿真，环境与robot建模，添加相机 lidar，控制robot运动

b站上有一个非常好的ros教程234仿真之URDF_link标签简介-机器人系统仿真_哔哩哔哩_bilibili&#xff0c;推荐去看原视频。 视频教程的相关文档见&#xff1a;6.7.1 机器人运动控制以及里程计信息显示 Autolabor-ROS机器人入门课程《ROS理论与实践》零基础教程 本文对视频教程…...

编程日记 2023/12/13 3:26:56

人体关键点检测3：Android实现人体关键点检测(人体姿势估计)含源码 可实时检测

目录 1. 前言 2.人体关键点检测方法 (1)Top-Down(自上而下)方法 (2)Bottom-Up(自下而上)方法&#xff1a; 3.人体关键点检测模型训练 4.人体关键点检测模型Android部署 &#xff08;1&#xff09; 将Pytorch模型转换ONNX模型 &#xff08;2&#xff09; 将ONNX模型转换…...

编程日记 2023/12/13 3:21:51

踩坑记录：uniapp中scroll-view的scroll-top不生效问题；

情景描述&#xff1a; 最近在uniapp项目中用到scroll-view内置组件&#xff0c;有需求是在页面下拉刷新后&#xff0c;让scroll-view组件区域的显示内容置顶&#xff0c;也就是scroll-view区域的内容恢复不滑动的状态&#xff1b; 补充&#xff1a;下拉刷新操作scroll-view组件…...

编程日记 2023/12/13 3:16:47

YOLOX 学习笔记

文章目录 前言一、YOLOX贡献和改进二、YOLOX架构改进总结 前言 在计算机视觉领域&#xff0c;实时对象检测技术一直是一个热门的研究话题。YOLO&#xff08;You Only Look Once&#xff09;系列作为其中的佼佼者&#xff0c;以其高效的检测速度和准确性&#xff0c;广泛应用于…...

编程日记 2023/12/13 3:15:46

第3节：Vue3 v-bind指令

实例&#xff1a; <template><div><button v-bind:disabled"isButtonDisabled">点击我</button></div> </template><script> import { ref } from vue;export default {setup() {const isButtonDisabled ref(false);ret…...

编程日记 2023/12/13 3:12:44

Token 和 N-Gram、Bag-of-Words 模型释义

ChatGPT&#xff08;GPT-3.5&#xff09;和其他大型语言模型&#xff08;Pi、Claude、Bard 等&#xff09;凭何火爆全球&#xff1f;这些语言模型的运作原理是什么&#xff1f;为什么它们在所训练的任务上表现如此出色&#xff1f; 虽然没有人可以给出完整的答案&#xff0c;但…...

编程日记 2023/12/13 3:09:41

【go语言实践】基础篇 - 流程控制

if语句 go里面if不需要括号将条件表达式包含起来&#xff0c;这与python也有点类似 if 条件表达式 { } if num > 18 {// ... } else if num > 20 {// ... } else {// ... }需要注意的是go支持在if的条件表达式中直接定义一个变量&#xff0c;变量的作用域只在if范围内…...

编程日记 2023/12/13 3:08:40

Linux：gdb的简单使用

个人主页 &#xff1a; 个人主页 个人专栏 &#xff1a; 《数据结构》 《C语言》《C》《Linux》 文章目录 前言一、前置理解二、使用总结 前言 gdb是Linux中的调试代码的工具 一、前置理解 我们都知道要调试一份代码&#xff0c;这份代码的发布模式必须是debug。那你知道在li…...

编程日记 2023/12/13 3:07:39

NestJS的微服务实现

1.1 基本概念 微服务基本概念&#xff1a;微服务就是将一个项目拆分成多个服务。举个简单的例子&#xff1a;将网站的登录功能可以拆分出来做成一个服务。 微服务分为提供者和消费者&#xff0c;如上“登录服务”就是一个服务提供者&#xff0c;“网站服务器”就是一个服务消…...

编程日记 2023/12/13 3:06:39

Debian 终端Shell命令行长路径改为短路径

需要修改bashrc ~/.bashrc先备份一份 cp .bashrc bashrc.backup编辑bashrc vim ~/.bashrc可以看到bashrc内容为 # ~/.bashrc: executed by bash(1) for non-login shells. # see /usr/share/doc/bash/examples/startup-files (in the package bash-doc) # for examples# If…...

编程日记 2023/12/13 3:05:38

Ansible变量是什么？如何实现任务的循环？

Ansible 利用变量存储整个 Ansible 项目文件中可重复使用的值&#xff0c;从而可以简化项目的创建和维护&#xff0c;并减少错误的发生率。在定义Ansible变量时&#xff0c;通常有如下三种范围的变量&#xff1a; global范围&#xff1a;从命令行或Ansible配置中设置的变量&am…...

编程日记 2023/12/13 3:03:36

随机梯度下降的代码实现

在单变量线性回归的机器学习代码中&#xff0c;我们讨论了批量梯度下降代码的实现&#xff0c;本篇将进行随机梯度下降的代码实现&#xff0c;整体和批量梯度下降代码类似&#xff0c;仅梯度下降部分不同&#xff1a; import numpy as np import pandas as pd import matplotl…...

编程日记 2023/12/13 3:02:35

Slide离线阅读功能详解：随时随地浏览Reddit内容的完整教程

Slide离线阅读功能详解&#xff1a;随时随地浏览Reddit内容的完整教程 【免费下载链接】Slide Slide is an open-source, ad-free Reddit browser for Android. 项目地址: https://gitcode.com/gh_mirrors/sl/Slide 你是否经常在地铁、飞机或网络信号不佳的地方想要浏览…...

编程新知 2026/5/20 11:37:22

从“让大模型回答问题“到智能决策：LangGraph 构建 AI Agent 的核心奥秘

本文深入解析了 AI Agent 的核心价值在于判断与决策&#xff0c;而非简单回答问题。LangGraph 作为图式工作流框架&#xff0c;通过 State&#xff08;共享状态&#xff09;、Node&#xff08;处理节点&#xff09;、Router&#xff08;决策分支&#xff09;的设计&#xff0c;…...

编程新知 2026/5/20 10:59:22

手把手教你搞定Windows下的NAMD和VMD安装（附最新版下载与注册避坑指南）

Windows平台NAMD与VMD安装全攻略&#xff1a;从零开始玩转分子动力学模拟 当第一次接触分子动力学模拟时&#xff0c;软件安装往往是新手面临的第一个挑战。NAMD和VMD作为该领域最常用的工具组合&#xff0c;它们的安装过程看似简单&#xff0c;实则暗藏诸多细节。本文将带你从…...

编程新知 2026/5/20 10:53:54

不止于获取数据：用baostock+Pandas+Matplotlib打造你的第一个股票分析仪表盘

从数据获取到洞察生成&#xff1a;构建股票分析仪表盘的全流程实战 在金融数据分析领域&#xff0c;获取原始数据只是万里长征的第一步。真正有价值的是如何将这些数据转化为可操作的洞察。本文将带你使用Python生态中的baostock、Pandas和Matplotlib等工具&#xff0c;构建一个…...

编程新知 2026/5/20 10:44:32

RT-Thread开发者大会技术解析：从RTOS内核到AIoT平台实战指南

1. 项目概述&#xff1a;一场国产嵌入式技术的年度盛会 2021年的RT-Thread开发者大会&#xff0c;对于当时国内嵌入式软件圈的从业者来说&#xff0c;绝对是一个绕不开的关键节点。那一年&#xff0c;整个行业正处在一个微妙的转折期&#xff1a;一方面&#xff0c;芯片供应链…...

编程新知 2026/5/20 10:11:54

干货 | 细胞功能学实验合集

细胞增殖实验细胞增殖、凋亡及细胞周期调控&#xff0c;是肿瘤学研究中的核心表型指标&#xff0c;同时也是分子生物学与药理学领域的重点研究方向。在实验研究中&#xff0c;研究者通常通过在细胞内实现特定基因的过表达或干扰&#xff0c;来探究该基因对细胞增殖的调控作用&a…...

编程新知 2026/5/20 8:23:41

OntoFlow - AI本体智能应用开发平台 正式版（一个可以覆盖Palantir平台及底层能力的平台） 一种颠覆性的软件开发新模式

万物互联、数据感知、数字孪生、智能决策&#xff1a;本体智能OntoFlow’产品定位&#xff1a;AI本体智能应用开发平台 | 非本体建模设计平台可落地 可运行 可发布 | 非知识图谱 非设计软件 非Demo1人业务1人开发 模式 | 非传统软件开发模式半人工半AI开发 -> 未来全AI…...

编程新知 2026/5/20 8:14:43

从信号放大器到协议感知：深入解析Retimer与Redriver在高速链路中的角色演进

1. 高速链路中的信号完整性挑战 当你把手机靠近路由器时&#xff0c;网速会突然变快&#xff1b;用Type-C线连接移动硬盘传输大文件时&#xff0c;偶尔会出现卡顿——这些现象背后都隐藏着信号完整性这个关键问题。在AI服务器、数据中心互连、高端显卡这些需要高速数据传输的场…...

编程新知 2026/5/20 5:28:48

OpCore-Simplify终极指南：10分钟自动化完成黑苹果配置的完整教程

OpCore-Simplify终极指南&#xff1a;10分钟自动化完成黑苹果配置的完整教程 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在为复杂的黑苹果配置而…...

编程新知 2026/5/20 4:51:04

实测 DeepSeek-V4 接入 Hermes：一句话爬取几十个网页，真的丝滑！

你好&#xff0c;我是郭震OpenClaw龙虾使用有一段时间了&#xff0c;体感很好&#xff0c;即便使用本地模型&#xff0c;如Qwen3.5:9B这样的模型&#xff0c;养虾Token自由&#xff0c;回复也比较丝滑。如下所示&#xff0c;轻松生成HTML风格的文件结构树&#xff1a;也能轻松生…...

编程新知 2026/5/20 3:56:58