欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于轮播图

程序员文章站 2022-04-19 11:20:38
...

1.事件绑定

<li onclick="move()"></li>
左边是事件,右边是处理函数,需要加括号,如果要获取事件对象,就把event传进去,如果要获取this,就把this传进去。

2.HTML自定义属性
要获取标签的自定义属性,要用getAttribute(),修改要用setAttribute()。

3.给DOM元素增加或者删除class用DOM.classList.remove/add。

4.e.target和e.currentTarget的区别。
e.target是指触发事件的元素,e.currentTarget是指绑定事件的元素。如果没有冒泡或者捕获,他们是一致的,如果有冒泡或者捕获,他们就不一定一致。关于轮播图
事件冒泡阶段,e.currenttarget和e.target是不相等的,但是在事件的目标阶段,e.currenttarget和e.target是相等的

5.event.target.tagName是大写,需要转换成小写 toLowerCase() 转成大写toUpperCase()

6.li标签中间有空格,不要用display:inline-block,用float: left,这样就没有空格了。

7.关于transition过渡效果,第一次点击都没有过渡效果,后面再次点击才有过渡效果。
解决方法是一开始就给定left: 0; position: absolute;
每次点击向左移动,offsetLeft不是400px的倍数,也有可能是这个原因。

8.用transition来做过渡动画,频繁触发transition可能会使轮播图移动不到位,需要增加判断和延时解锁来帮助解决这个问题。

9.DOM.style.left属性不能储存起来使用

10.mouseenter和mouseleave要用addEventListener来绑定事件。

11.setInterval(move(‘left),1000)。这里setInterval只运行了一次,因为move('left)没有返回值,所以只调用了一次。setInterval(move,1000),如果要传参,可以这样写:setInterval(move,1000,'left)

相关标签: 项目经验