首先来分析一下轮播图效果的实现原理:
1、父元素作为显示窗口,大小固定超出部分隐藏,即设置overflow:hidden;
2、子元素存放图片列表用ul,ul固定定位,参照为父元素,即父元素position:relative;ul元素position:absolute;
3、一个li即一张图片的宽度为父元素的显示宽度
4、初始时,ul的left为0,这时第一张图片即第一个li显示
5、点击下一张按钮,将整个ul左移,使第二个li对齐父元素的左边框,此时ul的left为负的一个li的宽度
6、点击