Sublime Text
01首先在Sublime Text下面准备一个html和5张图片,图片宽高为600px和400px,如下图所示
02然后在HTML页面中布局轮播图的结构,如下图所示,主要包括图片区域,圆形按钮,左右箭头
03接下来需要给轮播图页面布局声明一些样式,请按照下图所示的样式代码进行声明
04最后就是实现轮播图的JS脚本功能,如下图所示,主要包括前进,后退,自动播放的功能
05最后运行页面,你就会看到下图所示的轮播图效果,点击圆圈或者左右箭头可以切换轮播图
只告诉你原理咯,代码的话到处都有,直接down一个就行1、滑动一张就读取当前索引
2、滑动的距离根据当前的索引*滑动的距离
3、将第一张插入到容器的最后面,这样的话切换到第一张就不会看出来不衔接了
4、滑动到最后一张的时候继续往后面滑动,滑动玩之后将索引变成第二张图的索引