功能简介

1)网页打开即自动循环播放轮播图片

2)当鼠标移动到导航点上时显示对应图片,改变导航点背景颜色,循环播放暂停

3)当鼠标移动到图片上面左右指示箭头时,暂停循环播放,单击箭头时切换图片

所需材料

轮播图界面html代码

左右箭头及导航点背景色;加上之前256章节的样式

最终界面

任意图片即可,本示例要求:只要3张图片,因为里面的样式写死了

代码实操

此示例循环轮播图的底层逻辑就是通过改变index数值以显示相应的图片

1.编写一个带参数的ShowPic(n)方法,方法作用1)判断轮播图数组的下标 2)修改导航点的背景颜色 3)修改图片标签的src属性;ChangeIndex(n)修改index的值

显示修改图片代码

2.编写一个run()方法,添加一个定时器让轮播图自动循环播放

至此循环播放轮播图的核心代码已编写完毕

注意:每次修改代码完成后要立马保存然后刷新网页才能看到效果

3.为导航点注册移入/移出事件;为左右箭头注册单击事件

导航点移入移出事件

左右箭头事件