纯js实现轮播图过程中的个人疑难

最新推荐文章于 2024-06-01 16:31:45 发布

CathyLeeeee

最新推荐文章于 2024-06-01 16:31:45 发布

阅读量279

点赞数

本文链接：https://blog.csdn.net/CathyLeeeee/article/details/97822931

版权

本文探讨了在纯JavaScript中实现轮播图时遇到的关键技术点，包括CSS3的nth-child选择器、背景图像的自适应设置、HTML5的自定义属性、querySelector与getElementBy系列方法的区别、className的运用、事件监听器的添加方式以及定时器的使用。同时，对比了let和var在变量声明上的差异，强调了let的块级作用域和防止变量提升的特点。

摘要由CSDN通过智能技术生成

1.css3里面的nth-child（）选择器

:nth-child(n)选择器匹配父元素中的第 n 个子元素，元素类型没有限制。

n 可以是一个数字，一个关键字，或者一个公式。

2.background-image

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

这样就出现了没有自适应的问题。

解决办法：加上background-repeat:no-repeat;和background-size:100% 100%

3.html5l里面的data-*属性

<input type="button" value="按钮" data-index="10"data-index-color="red">

调用需用

var oBtn=document.querySelector('input');
console.log(oBtn.getAttribute('value'));            //按钮
console.log(oBtn.getAttribute('index'));            //10
console.log(oBtn.getAttribute('data-index'));        //10
console.log(oBtn.getAttribute