经常能看到各种各样的图片轮播，下面就从简单到复杂一步步完成一个图片轮播效果
效果1
这一步需要实现的结果如下图所示
关键点：
1、多张照片叠加，每次只能看到一张照片。
2、点击任意圆点，显示对应顺序的图片（点击第一个圆点，显示第一张图片,第一个圆点改为红色，点击第三个圆点，显示第三张图片，第三个圆点改为红色）。
第二点的关键处在于，如何通过JavaScript得到点击的是第几个圆点。转换一下思路，点击的圆点是父标签的第几个子元素。
方法有二
1是使用sourceIndex。浏览器给每个标签按顺序分配了sourceIndex，若要知道是父标签的第几个子元素，父子两个标签的sourceIndex相减即可。
2是循环。设置变量index=1，确定点击的圆点，查找圆点前面的兄弟节点，每找到一个index++。
完整代码如下var yuan;// 点击的圆点； var index=0; while(yuan=yuan.previousElementSilibing){ index++; }<!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> #img-3, #img-4, #img-2, #img-1 { width: 230px;
最低0.47元/天 解锁文章
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
