目录

一、轮播图知识点梳理

二、轮播图页面结构

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

四、轮播图js部分


 

一、轮播图知识点梳理

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

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

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

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

JavaScript案例-轮播图

二、轮播图页面结构

box>ul>li>img

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

JavaScript案例-轮播图

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

JavaScript案例-轮播图

JavaScript案例-轮播图    

四、轮播图js部分

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

JavaScript案例-轮播图  

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

JavaScript案例-轮播图  

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

JavaScript案例-轮播图

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

JavaScript案例-轮播图

相关文章:

  • 2021-11-22
  • 2022-02-08
  • 2021-11-22
  • 2021-11-01
  • 2021-11-22
  • 2021-12-16
  • 2021-05-09
  • 2022-01-12
猜你喜欢
  • 2021-07-24
  • 2021-12-05
  • 2021-11-21
  • 2022-02-08
  • 2022-02-08
  • 2021-12-06
  • 2022-02-07
相关资源
相似解决方案