轮播图有多种多样的形式,但是本质是类似的。对于传统轮播图来说,步骤基本如下:
1:建立一个最大的div,里面包含三个小的div。
2:第一个小div里面的内容是定义左右按钮,按钮用于切换临近的轮播图;第二个小div里面的内容是用ul插入图片,li向左漂浮(float;left);第三个小div里面的内容是小圆点的排列,同样向左漂浮(float;left),定义了第一个小圆点的颜色,光标指示为一只手(cursor: pointer)。
3:依次开始在<script>下定义,先外接一个js函数,再定义一个"options"的属性,然后得到各种元素;使用document.getElementById()和document.getElementsByTagName()等方式;克隆第一个li,即在ul下克隆第一个li。
4:设置右边的按钮点击的函数,具体为点击一次,运行一次函数。先设置信号量为0,函数为信号量自增1,改变小圆点,同时再设置运动变换的类型(外接一个js函数),这里的克隆的li就派上了用场,第li的length次点击后又会返回到第1个li。
5:设置左边的按钮点击的函数,信号量自增变为自减,其它同上。
6:设置小圆点。设置小圆点的index值为本身;设置小圆点的一个点击函数,具体为信号量就是此时点击的小圆点的编号,再设置运动变换的类型(外接一个js函数),同时改变小圆点。
7:设置改变小圆点的函数,使用排他函数。