html+css+JavaScript实现轮播图

目录

轮播图分析：

1、轮播图实现的功能

2、图片叠加原理

html页面布局：

CSS修饰：

JavaScript：
一、轮播图实现的功能
1、自动滚动图片。
2、触碰圆点按钮，按钮亮起；点击圆点按钮显示对应图片，按钮亮起。
3、触碰错左右按钮，按钮变色；点击左右按钮，图片左右轮播，并且图片对应的圆点按钮亮起。

• 文件
• 
  1、轮播图结构：
  
  2、轮播图样式：
  新建style文件夹 和里面的index.css文件 内容如下：
  
  
  3、 轮播图功能
  鼠标经过轮播图 左右箭头显示， 鼠标离开 左右箭头隐藏；
  点击左右箭头，图片切换，底下的小圆点也会对应变化
  点击小圆点，也能实现切换图片效果
  鼠标不经过轮播图，自动播放
  鼠标经过轮播图，自动播放停止
  新建js文件夹和里面的index.js文件，内如如下