文章目录

• js原理
• 实施任务
• • 1.从左往右无缝滚动
  • • 代码示例
    • 运行效果
  • 2.从右往左无缝滚动
  • • 代码示例
    • 运行效果
  • 3.从上往下无缝滚动
  • • 代码示例
    • 运行效果
  • 4.从下往上无缝滚动
  • • 代码示例
    • 运行效果

js原理

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

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

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

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

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

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

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

实施任务

1.从左往右无缝滚动

代码示例

运行效果

2.从右往左无缝滚动

代码示例

运行效果

3.从上往下无缝滚动

代码示例

运行效果

4.从下往上无缝滚动

代码示例

运行效果