四种for的区别,水平垂直居中的实现,循环自动轮播的实现

2024-09-01 08:20

本文主要是介绍四种for的区别,水平垂直居中的实现,循环自动轮播的实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.for循环、foreach循环,forof循环,forin循环的区别

1.1for循环

是JavaScript中最基本的循环结构之一,它可以用于遍历数组或执行固定次数的迭代

1.2foreach循环

forEach是数组的一个方法,它遍历数组的每个元素,并对每个元素执行一次提供的函数。forEach没有返回值(即返回undefined),并且不能直接修改数组的长度

let fruits = ['Apple', 'Banana', 'Mango', 'Orange'];  fruits.forEach(function(item, index) {  console.log(index, item);  
});  // 输出:  
// 0 'Apple'  
// 1 'Banana'  
// 2 'Mango'  
// 3 'Orange'

1.3forof循环

for...of循环允许你遍历具有迭代器接口的数据结构(如数组、Map、Set、arguments对象等)。与forEach相比,for...of提供了更多的灵活性,比如支持break、continue和return语句。

element属性名,arr遍历对象名


let arr = [1, 2, 3, 4];  
for (let element of arr) {  console.log(element);  
}

1.4forin循环

for...in循环遍历一个对象的所有可枚举属性(包括其原型链上的属性)。它主要用于遍历对象,而不是数组           key属性名、obj遍历对象名

let obj = {a: 1, b: 2, c: 3};  
for (let key in obj) {  if (obj.hasOwnProperty(key)) { // 过滤掉原型链上的属性  console.log(key, obj[key]);  }  
}

2.水平垂直居中的实现

示例

    <div class="parent"><div class="child"></div></div>

方法1

核心:

  • 利用定位父子相绝(父盒子加相对定位,子盒子加绝对定位)
  • top和left设置成50%
  • transform:translate(-50%,-50%)调整元素的中心点到页面的中心
       .parent{position: relative;}.child{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}

方法2

核心 :

  • 利用绝对定位
  • 设置四个方向都是0
  • 利用margin:auto;实现水平方向和垂直方向居中
        .parent{position: relative;}.child{position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}

方法3

核心:

利用绝对定位

利用top和left  :50%固定页面中心

利用margin负值调整元素的中心点到页面的中心 

        .parent{position: relative;}.child{position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;/*自身宽高的一半*/}

方法4

核心:

利用flex布局

通过align-items:center

justify-content:center实现水平和垂直居中对齐

        .parent{display: flex;justify-content: center;align-items: center;}

3.自动循环轮播的实现

HTML代码body

    <ul class="xunhuan">  <li><a href="#"><img src="../img/刘德华1.gif" alt="刘德华"></a></li>  <li><a href="#"><img src="../img/黎明中午好.gif" alt="黎明"></a></li>  <li><a href<img src="../img/刘德华1.gif" alt="刘德华"></a></li>  <li><a href="#="#"><img src="../img/背景2.jpg" alt="背景"></a></li>  <li><a href="#"><img src="../img/黎明.png" alt="黎明"></a></li>  <li><a href="#"><img src="../img/晚上好.gif" alt="��德华"></a></li></ul>  

css代码

      .xunhuan {  list-style: none;  padding: 0;  margin: 0;  position: relative;  width: 600px; /* 根据需要调整 */  height: 400px; /* 根据需要调整 */  overflow: hidden;  
}  .xunhuan li {  position: absolute;  width: 100%;  height: 100%;  opacity: 0;  transition: opacity 1s;  
}  .xunhuan li:first-child {  opacity: 1;  
}  .xunhuan img {  width: 100%;  height: auto;  display: block;  
}  
.xunhuan-container {  position: relative;  width: 600px; /* 与.xunhuan相同 */  margin: auto; /* 居中显示 */  
} .prev, .next {  position: absolute;  top: 50%;  transform: translateY(-50%);/* 调整按钮位置 */background-color: rgba(0, 0, 0, 0.5);  color: white;  border: none;  cursor: pointer;  padding: 10px 20px;  z-index: 10;  
}  .prev {  left: 10px;  
}  
.next {  right: 10px;  
}

js代码

var xunhuan=document.querySelector('.xunhuan');
const images = document.querySelectorAll('.xunhuan li');  
const totalImages = images.length;  
let currentIndex = 0; 
function showImage(index) {  images.forEach((img, idx) => {  img.style.opacity = 0;  //设置图片透明度为0表示完全透明if (idx === index) {  img.style.opacity = 1;  //设置图片透明度为1表示完全不透明}  });  
}  
//上一张图片
function nextImage() {  currentIndex = (currentIndex + 1) % totalImages;  showImage(currentIndex);  
}  //下一个图片  
function prevImage() {  currentIndex = (currentIndex - 1 + totalImages) % totalImages;  showImage(currentIndex);  
}  // 自动轮播  
setInterval(nextImage, 3000); // 每3秒切换到下一张图片  // 绑定按钮点击事件  
var prev=document.querySelector('.prev');
var next=document.querySelector('.next');
next.addEventListener('click', nextImage);  
prev.addEventListener('click', prevImage);
//鼠标经过显示左右按钮xunhuan.addEventListener('mouseover',function(){prev.style.display='block';  next.style.display='block';    })xunhuan.addEventListener('mouseout',function(){prev.style.display='none';  next.style.display='none';   })

这篇关于四种for的区别,水平垂直居中的实现,循环自动轮播的实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1126422

相关文章

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》:本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT?二、JWT 基本结构

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Redis消息队列实现异步秒杀功能

《Redis消息队列实现异步秒杀功能》在高并发场景下,为了提高秒杀业务的性能,可将部分工作交给Redis处理,并通过异步方式执行,Redis提供了多种数据结构来实现消息队列,总结三种,本文详细介绍Re... 目录1 Redis消息队列1.1 List 结构1.2 Pub/Sub 模式1.3 Stream 结