js效果之图片滚动

图片滚动效果如下图:


html和css样式如下图:




js实现原理: 获取整个uL和ul下面的所有li, 把ul里面的li内容添加一份,因为需要完成图片滚动效果所以需要二份完成无缝对接, 定义初始速度


   设置定时器  在定时中进行判断  实现原理:因为ul是跟着父元素box进行定位的,所以ul的offsetleft的值初始值为0

         只需要改变ul的left值就可以完成滚动效果   当ul的offsetleft值大于0的时候说明图片正在向右滚动,此时只需要把当前left值变成整个盒子的一半

        并且将盒子定位到左边一半的位置就能完成滚动中的无缝对接

        当uL的offset值小于负的此时盒子一半,说明盒子正在向左移动,完成滚动的一半时,则需要将此时的ul回到最初的位置

        每走一次定时器,将left的值添加定义的初始速度,完成滚动


获取上方两个左右滚动,因为第一个是向左滚动,只需要将此时的初始速度变成负数

        同理,点击向右滚动的时候将初始速度变回正数


js代码:


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。