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

前端: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);

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/209090.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HuggingFace学习笔记--Prompt-Tuning、P-Tuning和Prefix-Tuning高效微调

1--Prompt-Tuning 1-1--Prompt-Tuning介绍 Prompt-Tuning 高效微调只会训练新增的Prompt的表示层&#xff0c;模型的其余参数全部固定&#xff1b; 新增的 Prompt 内容可以分为 Hard Prompt 和 Soft Prompt 两类&#xff1b; Soft prompt 通常指的是一种较为宽泛或模糊的提示&…

搭乘“低代码”快车,引领食品行业数字化转型全新升级

数字化技术作为重塑传统行业重要的力量&#xff0c;正以不可逆转的趋势改变着企业经营与客户消费的方式。 在近些年的企业数字化服务与交流过程中&#xff0c;织信团队切实感受到大多数企业经营者们从怀疑到犹豫再到焦虑最终转为坚定的态度转变。 在这场数字化转型的竞赛中&a…

VS2009和VS2022的错误列表可复制粘贴为表格

在VS2019或VS2022中&#xff0c;可看到如下错误列表&#xff1a; 如果复制这两行错误信息&#xff1a; 然后把它粘贴到word文件&#xff0c;就可以看到以下表格&#xff1a; 严重性 代码 说明 项目 文件 行 禁止显示状态 错误(活动) E0020 未定义标识符 "dd"…

0基础学java-day16-(坦克大战[1])

一、 坦克大战游戏演示 1 游戏演示 2.为什么写这个项目 3.写项目前的提醒 二、java 绘图坐标体系 1 坐标体系-介绍 2 坐标体系-像素 3 介绍-快速入门 package com.hspedu.draw;import javax.swing.*; import java.awt.*;/*** author 林然* version 1.0* 演示如何在面板画圆…

【python可视化系统源码】基于爬虫与可视化的电影推荐系统课题背景、目的、意义、研究思路、研究方法

该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程等学习内容。 目录 一、项目介绍&#xff1a; 二、文档学习资料&#xff1a; 三、模块截图&#xff1a; 四、开发技术与运行环境&#xff1a; 五、代码展示&#xff1a; 六、数据库表截图&#xff1a…

从简单到入门,一文掌握jvm底层知识文集。

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

【Linux systemctl命令控制软件的启动和关闭】

文章目录 Linux systemctl命令&#xff1a;控制软件的启动和关闭1. 查看服务状态2. 启动服务3. 停止服务4. 重启服务5. 设置开机自启6. 取消开机自启7. 重新加载配置 Linux systemctl命令&#xff1a;控制软件的启动和关闭 1. 查看服务状态 要查看系统上所有服务的状态&#…

matlab RGB三元组和十六进制的转换

matlab画柱状图改颜色的时候&#xff0c;用三元组的形式&#xff0c;范围是[0&#xff0c;1] 我们获得了十六进制 到网站转换为[0,255] https://c.runoob.com/front-end/55/ 然后将得到的值/255 输入matlab就可以了

Bean作用域和生命周期

小王学习录 前言Bean的作用域什么是Bean的作用域Bean的六种作用域1. 单例作用域 singleton2. 原型作用域 prototype (多例作用域)3. 请求作用域 request4. 会话作用域 session5. 全局作用域 application6. Http WebSocket作用域 websocket Spring的执行流程和Bean的生命周期Spr…

网页设计--第6次课后作业

试用Vue相关指令完成对以下json数据的显示。显示效果如下&#xff1a; 其中&#xff1a;gender1 显示为女&#xff0c;gender2显示为男。价格超过30元&#xff0c;显示“有点小贵”。价格少于等于30元&#xff0c;则显示“价格亲民”。 data: {books: [{"id": "…

springboot集成字典注解

又是想下班的一天 文章目录 前言springboot使用AOP简单集成字典注解 一、通过注解进行字典赋值二、使用步骤1.添加注解2.序列化处理类3.实体类添加注解4.json返回值 总结 前言 springboot使用AOP简单集成字典注解 一、通过注解进行字典赋值 使用AOP切面实现字典的赋值,自动将…

MongoTemplate 常用查询

MongoTemplate是Spring Data MongoDB提供的一个Java编程接口&#xff0c;用于操作MongoDB数据库。它提供了一系列方法和功能&#xff0c;以便进行数据的插入、更新、删除和查询等操作。 使用MongoTemplate&#xff0c;你可以通过编写Java代码与MongoDB进行交互&#xff0c;而无…

二百一十四、Linux——Linux系统时间比电脑时间慢5分钟

一、目的 服务器重启后&#xff0c;发现Linux的系统时间比电脑时间慢5分钟&#xff0c;于是看了些博客&#xff0c;终于找到了解决方法&#xff0c;记录一下&#xff0c;以防止后面出现同样的问题 二、问题 通过date查看&#xff0c;Linux系统时间比电脑时间慢5分钟 &#…

IEEE RAS 机器人最优控制(Model-based Optimization for Robotics)学习资料

系列文章目录 前言 电气和电子工程师学会机器人模型优化技术委员会 一、学习资料 1.1 教程和暑期学校 2020 年 Memmo 欧盟项目暑期班2019年Memmo欧盟项目冬季学校Matthias Gerdts&#xff08;德国慕尼黑联邦国防军大学&#xff09;在拜罗伊特 OMPC 2013 上举办的最优控制教程…

详解vue生命周期

vue2 生命周期 Vue.js是一个流行的JavaScript框架&#xff0c;它使用了一套生命周期钩子函数来管理组件的创建、更新和销毁过程。以下是Vue组件的生命周期钩子函数&#xff1a; beforeCreate&#xff1a;在实例初始化之后&#xff0c;数据观测 (data observer) 和 event/watch…

字节跳动ZNS SSD应用案例解析

一、ZNS SSD基本原理 ZNS SSD的原理是把namespace空间划分多个zone空间&#xff0c;zone空间内部执行顺序写。这样做的优势&#xff1a; 降低SSD内部的写放大&#xff0c;提升SSD的寿命 降低OP空间&#xff0c;host可以获得更大的使用空间 降低SSD内部DRAM的容量&#xff0c;…

一款可无限扩展的软件定时器开源框架项目代码

摘自链接 时间片轮询架构如何稳定高效实现&#xff0c;取代传统的标志位判断方式&#xff0c;更优雅更方便地管理程序的时间触发操作。 可以在STM32单片机上运行。

基于SSM的社区管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

LeetCode(52)最小栈【栈】【中等】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 最小栈 1.题目 设计一个支持 push &#xff0c;pop &#xff0c;top 操作&#xff0c;并能在常数时间内检索到最小元素的栈。 实现 MinStack 类: MinStack() 初始化堆栈对象。void push(int val) 将元素val推入堆栈。void…

区分工业设计软件中CAD、CAE、CAM、PDM等概念

工业设计软件是专门用于辅助工业设计师在产品设计和开发过程中进行各种任务的计算机程序。这些软件提供了广泛的工具和功能&#xff0c;帮助设计师创建、分析、修改和可视化产品的概念和详细设计。 CAD 计算机辅助设计&#xff08;Computer-Aided Design&#xff0c;CAD&…