js图片轮播怎么让轮播界面居中?

JavaScript017

js图片轮播怎么让轮播界面居中?,第1张

这个要看具体的代码了,最好把关键的代码发下;

如果可以的,可以给这介效果的HTML代码外面加上一个宽度正好的DIV,然后再给这个DIV加上CSS:maigin:0 auto这样应该就可以了;

但是也看这样写效果还有没有。总之解决方法不惟一,且不看具体情况也不好说怎么弄。

方法:

将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏;

轮播图分为手动轮播和自动轮播;手动轮播的重点是每次点击图片下方的小圆圈,获得它的索引号,并让与之对应索引号的图片显示,并且此时的小圆圈为高亮显示;自动轮播:利用定时器setInterval(),来每隔一定的时间来播放一次图片。

所有的基础知识:dom操作,定时器,事件运用。

工具/材料

Sublime Text

01

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

02

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

03

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

04

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

05

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