图片-轮播

图片轮播

 

下面我们来完成页面中轮播的功能，首先是页面的布局用一个div标签给他一个类用来设置一个显示图片的盒子，再写图片部分用ul和li标签设置一下ul标签的类和ID，在li标签里面用一个a标签来放置图片，轮播用到多少张图片就设置多少个li标签来放置图片；

 

然后设置一下显示图片的盒子宽、高、背景等样式和设置轮播图片的大小，和按钮的样式再页面显示的位置。

 

布局完成之后开始写轮播的js代码部分，首先是写轮播的函数给轮播函数传进来一个偏移量offset，再获取到放置图片盒子的ID，设置一下图片运动的总时间和图片运动搞得间隔时间，再用时间除间隔时间计算出偏移量和目标值；之后是动画的函数判断一下speed大于0计算出来还是小于newleft时，说明还没有运动到目标值的位置所以还要再次运动，speed小于0计算出left值比newleft大说明还没有到目标值的位置需要再次运动，如果当中有一条满足条件再计算一次left+上偏移量；如果上面条件都不满足代表这个动画已经移动到想要的位置了；就让他的left值等于目标值。