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

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

news 2026/4/4 22:21:02

前端：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

VS2019项目重构实战：从命名空间到解决方案的全面重命名指南

1. 为什么需要全面重命名项目&#xff1f; 接手他人项目或者复用旧项目框架时&#xff0c;第一件事就是要给项目"改头换面"。这就像买二手房后的装修&#xff0c;不改名字总觉得住着别人的房子。我在团队协作中经常遇到这种情况&#xff1a;某个老项目要适配新业务&a…...

编程新知 2026/4/4 21:59:52

好写作AI“学术清道夫”：论文查重，为学术诚信保驾护航

在学术的浩瀚星空中&#xff0c;论文是学子们展示智慧与研究成果的璀璨星辰。然而&#xff0c;随着学术交流的日益频繁&#xff0c;论文抄袭、剽窃等不端行为也时有发生&#xff0c;这不仅损害了学术的公正性和严肃性&#xff0c;也阻碍了学术的健康发展。在这样的背景下&#…...

编程新知 2026/4/4 21:59:52

TongWeb8.0支持JBoss Weld‌

JBoss Weld‌ 是 CDI&#xff08;Contexts and Dependency Injection&#xff0c;JSR 299/346/365&#xff09;的官方参考实现&#xff08;RI&#xff09;&#xff0c;用于在 Java EE / Jakarta EE 应用中提供依赖注入和上下文管理功能。它不仅内置于 WildFly、GlassFish 等应用…...

编程新知 2026/4/4 20:57:38

2025届学术党必备的六大AI辅助论文方案解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 将人工智能技术应用于内容创作领域的重要的AI写作软件&#xff0c; 正逐渐改变传统写作模式&…...

编程新知 2026/4/4 19:54:58

面试“逆袭率”第一的秘密：让我为你细细阐述

报名前&#xff0c;我做足了功课。张永老师深耕贵州公考面试教学12年&#xff0c;这些年来&#xff0c;他带出的学员上岸率在业内是公认的。他教出的高分学员数量业内最高&#xff0c;这些实实在在的数据&#xff0c;远比“名师”两个字有说服力。真正让我服气的&#xff0c;是…...

编程新知 2026/4/4 18:34:12

Godot 4 2D 物理引擎位置初始化踩坑：add_child() 和 position 到底谁先？ （错误位置触发物理事件）

Godot 4 2D 物理引擎位置初始化踩坑&#xff1a;add_child() 和 position 到底谁先&#xff1f; 在 Godot 4 做 2D 游戏时&#xff0c;很多人都会遇到一个很诡异的问题&#xff1a; 我明明想把一个 PackedScene 实例生成在 B 点&#xff0c;结果它却会在默认位置 A 点 短暂触发…...

编程新知 2026/4/4 18:17:54

实战应用：基于快马平台构建带交互功能的可部署qclaw官网

今天想和大家分享一个实战项目&#xff1a;用纯前端技术快速搭建一个具备基础交互功能的腾讯qclaw官网。这个项目不仅实现了静态页面展示&#xff0c;还包含了几个实用的交互功能&#xff0c;非常适合想练习前端开发的朋友。 项目背景与需求分析 官网作为产品门面&#xff0c;需…...

编程新知 2026/4/4 17:57:51

从‘点接触’报错到成功划分：Fluent Meshing中四面体与多面体网格的实战选择指南

Fluent Meshing网格选择实战&#xff1a;从点接触报错到高效划分策略 当你在Fluent Meshing中遇到"点接触"导致的网格划分失败时&#xff0c;那种挫败感我深有体会。记得去年处理一个涡轮机冷却通道模型时&#xff0c;几个看似微不足道的点接触让整个项目停滞了两天。…...

编程新知 2026/4/4 17:49:49

手把手教你：如何根据微软官方文档修改bat脚本，实现Excel文件格式的任意批量转换

从XLS到XLSX&#xff1a;基于微软官方文档的批处理脚本进阶指南 在数据处理工作中&#xff0c;Excel文件格式转换是常见的需求场景。许多用户可能只满足于使用现成的转换工具&#xff0c;但对于技术爱好者或需要频繁处理不同格式转换的专业人士来说&#xff0c;掌握如何根据微…...

编程新知 2026/4/4 17:43:43

OpenArk：你的Windows系统深度安全分析利器

OpenArk&#xff1a;你的Windows系统深度安全分析利器 【免费下载链接】OpenArk The Next Generation of Anti-Rookit(ARK) tool for Windows. 项目地址: https://gitcode.com/GitHub_Trending/op/OpenArk 你是否曾经面对系统异常却无从下手&#xff1f;是否担心恶意软件…...

编程新知 2026/4/4 17:37:40