无缝轮播滚动图

无缝轮播滚动图
效果图

实现效果

①无图片点击时,自动轮播设定定时器;
②点击圆点点会轮播并染色,点击左右键可轮播;

实现思路

①使图片整行排列,给一个窗口,溢出部分隐藏;
②因为要多次调用移动函数,经过尝试后选择参考封装一个animation.js函数,使其实现左右移动,透明度改变的效果;
③设定定时器进行轮播,注意的是设定的时间要大于一页滚动的时间;
④由于至今无法解决的问题,即快速多次点击按钮时因为当前页面因为还没滚动完,会实现鬼畜画面,最后选择的是将其锁定,让当前页面滚动完之后才能进行下一次点击滚动。无奈之举;
⑤无缝滚动想要实现的效果是第一张和最后一张进行无缝衔接,所以这里的思路是在第一张前面多放最后一张,后面同。

关于速度

实现变速:首先定义一个now让他获得我们要移动的元素的当前的位置的值,然后用我要要让他移动的距离即attr,去减去当前的位置,这个值会随着now的增大而减小。一开始没除以一个数,导致实现瞬移,因为now的初始值为0。



                    

你可能感兴趣的:(javascript,html)