1.HTML框架
如下图,分为三个部分,首先有个div承载,然后一个ul存放图片,一个ul存放数字,再两个button即可
2.CSS配置
首先外框div要设置和图片大小一致,并且居中对齐,position设置为相对定位,因为后面的图片什么的都是相对这个大框来绝对定位的
接着设置图片,五张图片叠加这个通过absolute这个属性来实现,因为上面我们把父级容器设置为relative,所以里面的子元素都是相对父级div来绝对定位的
接下来的其他元素我会用注释写到代码中
效果如下:
3.jquery控制轮播
实现手动轮播
意思就是鼠标移到下面数字,就显示对应的图片
实现自动轮播
实现点击轮播
动态控制li数字显示数量
通过图片数量控制标签数量即可
下载本文