js如何制作图片轮播

JavaScript021

js如何制作图片轮播,第1张

工具/材料

Sublime Text

01

首先在Sublime Text下面准备一个html和5张图片,图片宽高为600px和400px,如下图所示

02

然后在HTML页面中布局轮播图的结构,如下图所示,主要包括图片区域,圆形按钮,左右箭头

03

接下来需要给轮播图页面布局声明一些样式,请按照下图所示的样式代码进行声明

04

最后就是实现轮播图的JS脚本功能,如下图所示,主要包括前进,后退,自动播放的功能

05

最后运行页面,你就会看到下图所示的轮播图效果,点击圆圈或者左右箭头可以切换轮播图

1:排出一个版,包含上下切换的标识和图片导航,所有图片隐藏,给图片第一张加一个class名,样式设为显示,图片导航的第一个加一个class名,加上背景色;

2:获取节点;

3:给向下切换写一个点击事件,点击图片切换到下一张,注意当图片切换到最后一张的时候会报错,所以必须要判断一下,当图片切换到最后一张的时候在,再次击会切换到第一张;

4:给向上切换写一个点击事件,注意当图片切换到第一张之后会报错,所以必须要判断一下,当图片切换到第一的时候,再次点击会切换到最后张,循环起来;

5:写一个定时器,定时器的播放顺序和向下切换一致,可以封装一个函数方便调用;

6:写鼠标划入事件,清除定时器;

7:写鼠标移出事件,定时器继续运行;

8:图片导航的点击事件

点击事件click

定时器setlnterval()

if判断

for()循环