图片轮播
下面我们来完成页面中轮播的功能,首先是页面的布局用一个div标签给他一个类用来设置一个显示图片的盒子,再写图片部分用ul和li标签设置一下ul标签的类和ID,在li标签里面用一个a标签来放置图片,轮播用到多少张图片就设置多少个li标签来放置图片;
然后设置一下显示图片的盒子宽、高、背景等样式和设置轮播图片的大小,和按钮的样式再页面显示的位置。
布局完成之后开始写轮播的js代码部分,首先是写轮播的函数给轮播函数传进来一个偏移量offset,再获取到放置图片盒子的ID,设置一下图片运动的总时间和图片运动搞得间隔时间,再用时间除间隔时间计算出偏移量和目标值;之后是动画的函数判断一下speed大于0计算出来还是小于newleft时,说明还没有运动到目标值的位置所以还要再次运动,speed小于0计算出left值比newleft大说明还没有到目标值的位置需要再次运动,如果当中有一条满足条件再计算一次left+上偏移量;如果上面条件都不满足代表这个动画已经移动到想要的位置了;就让他的left值等于目标值。