这篇博客介绍了如何使用jQuery实现轮播图，主要通过动态修改图片的marginTop属性来实现上下轮播效果。作者首先说明了实现原理，包括隐藏除第一张之外的图片，设置mouseover和mouseleave事件的导航按钮，以及利用interval和ShowImg函数进行定时切换。博客还展示了最终的轮播图效果，并提供了实现代码。
引言
学习jQuery有年头了，刚开始学习时自己动手写过轮播图，放的久了以至于忘了大致思路了。现在转而做前端，抽空把jquery轮播图拿出来写一写，把各种思路都自己练习练习，这里主要使用动态修改marginTop来实现。
实现原理
1、除第一张图片外，其余图片全部隐藏，4张图片重叠起来。
2、导航按钮添加mouseover和mouseleave事件。
3、设置interval函数，启动定时器调用ShowImg函数。
4、动态修改marginTop属性达到上下轮播的效果，说道动态修改margin属性，在以前滑动门中也是这个原理。
效果图（图片引用自橡树小屋博客）
实现代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
最低0.47元/天 解锁文章
扫一扫
1120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
