JavaScript案例-轮播图

目录

一、轮播图知识点梳理

二、轮播图页面结构

三、需要用到的封装函数--获取元素属性getStyle()，图片位移move()

四、轮播图js部分

---

 

一、轮播图知识点梳理

1、图片自动轮播--间隔定时器，图片元素位移move函数

2、鼠标移入/移出，图片停止/开启轮播--清除定时器，onmouseenter，onmouseleave

3、左右箭头事件图片切换--n++，n--，图片位移move函数

4、每个小圆点点击事件对应图片切换--背景样式设置

二、轮播图页面结构

box>ul>li>img

共五张图，最后一张=第一张图--实现无缝轮播效果

三、需要用到的封装函数--获取元素属性getStyle()，图片位移move()

   

四、轮播图js部分

1、图片轮播--间隔定时器，移动ul位移

  

2、  鼠标移入移出--关闭定时器开启定时器

  

3、左右箭头点击事件切换图片

4、每个小圆点事件--第一个for，设置自定义属性index标记每个圆点的下标，注意要将用户点击的小圆点全部清除样式--第二个for，再设置当前圆点样式