功能。默认情况下,它会无限循环地向右移动。单击数字可切换到相应的图片。所有图片重叠在布局上,即只要Y方向对齐,当前可见的图片z-index级别最高。每3s换一张图片,用setTimeout计时。使用gIndex记录当前可见区域显示的图片的下标,每次变化时计算下一张图片的下标。通过requestAnimationFrame实现一个图片切换的动画。这种方法也可以让整个页面始终只有2个img标签,而不需要创建所有的img节点。重点是每次都要更换不可见img的src。动画的实现首先定义一个时间戳,这个值记录每一帧移动了多少。定义初始step=0,记录移动步数。每次移动的距离moveWidth为timestamp*step,图1向右移动增加moveWidth,图2从左侧进入moveWidth。因此,图像1的变换是translate(moveWidth),图像2的变换是translate(moveWidth-imagewidth)。3.step+14.如果moveWidth>图片宽度,执行第5步,否则requestAnimationFrame请求下一次执行,继续2-4。5、图片1和2都放在起始位置,设置图片2的z-index最高。这样就完成了一个移动动画。html代码
