上传者: 38663036
|
上传时间: 2022-06-17 20:32:36
|
文件大小: 294KB
|
文件类型: PDF
本文写了一个轮播图练练手,先写了一个手动点击轮播的轮播图,随后我会慢慢接着深入写自动轮播图和鼠标悬浮图片停止移动轮播图等。
下面来看看最终做的手动点击轮播效果:
一、原理说明
(1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮
(2)对最外边的大div设置的宽度为图片的宽度,超出大div宽度的都需要隐藏,但是对于盛放图片的小div设置宽度为2000px,大一点方便四张图左浮动布局
(3)当数字按钮点击时,获取按钮的索引值,这样就可以知道每张图片左移多少宽度
从上面的图可以看出,四张图片是浮动起来横着的布局,