lol轮播图动态制作

203 阅读1分钟

一、制作导航部分
事件编程:1、事件源 2、事件 3、事件处理函数
本事件中
事件源:5个li标签
事件:鼠标进入事件(onmouseenter)
事件处理函数:对应的li标签加上选中样式,并且图片滚动到指定区域

注:在js中设置类名用 li.className="active"
代码如下:

11.png

12.png

13.png

14.png

二、制作图片部分
1、过渡动画属性 transition: all 0.5s;
代码如下:
给ul设置过渡动画属性

15.png

16.png

17.png

18.png

19.png

20.png

21.png