JS标准滚动效果合集DOME

• 左右无缝滚动 scrollX

  前后

  • 
  • 
  • 
  • 
  • 

  使用说明：

  1、HTML引用22-33行，可修改：图片数量，是否有按钮
  2、CSS引用13-19行，可修改：案例位置/尺寸/样式，整体尺寸
  3、JS参数说明：gavin.scrollX(a,speed,t,l)
  

  a：DOM节点，speed：自动滚动的速度（越小越快），t：前后点击移动执行时间，l：前后点击移动距离

• 带下标左右滚动 scrollSub

  • 
  • 
  • 
  • 
  • 

  12345

  使用说明：

  1、HTML引用49-60行，可修改：图片/下标数量，下标数字
  2、CSS引用22-28行，可修改：下标位置/样式，整体尺寸
  3、JS参数说明：gavin.scrollSub(a,t1,t2)
  

  a：DOM节点，t1：滚动间隔时间，t2：滚动执行时间

• 左右逐张滚动 scrollOne

  前后

  • 
  • 
  • 
  • 
  • 

  使用说明：

  1、HTML引用76-87行，可修改：图片数量，是否有按钮
  2、CSS引用31-37行，可修改：案例位置/尺寸/样式，整体尺寸
  3、JS参数说明：gavin.scrollOne(a,t1,t2)
  

  a：DOM节点，t1：滚动间隔时间，t2：滚动执行时间

• 带下标图片切换 switchAlpha

  • 
  • 
  • 
  • 
  • 

  使用说明：

  1、HTML引用103-112行，可修改：图片/下标数量
  2、CSS引用40-44行，可修改：下标位置/样式，整体尺寸
  3、JS参数说明：gavin.switchAlpha(a,t1,t2)
  

  a：DOM节点，t1：滚动间隔时间，t2：滚动执行时间

• 上下无缝滚动 scrollY

  前后

  • 
  • 
  • 
  • 
  • 

  使用说明：

  1、HTML引用128-137行，可修改：图片数量，是否有按钮
  2、CSS引用47-52行，可修改：案例位置/尺寸/样式，整体尺寸
  3、JS参数说明：gavin.scrollY(a,speed,t,l)
  

  a：DOM节点，speed：自动滚动的速度（越小越快），t：前后点击移动执行时间，l：前后点击移动距离

• 上下逐张滚动 scrollOneY

  前后

  • 
  • 
  • 
  • 
  • 

  使用说明：

  1、HTML引用153-162行，可修改：图片数量，是否有按钮
  2、CSS引用55-60行，可修改：案例位置/尺寸/样式，整体尺寸
  3、JS参数说明：gavin.scrollOneY(a,t1,t2)
  

  a：DOM节点，t1：滚动间隔时间，t2：滚动执行时间

• 左右手风琴效果 Accordion

  • 
  • 
  • 
  • 
  • 

  使用说明：

  1、HTML引用178-186行，可修改：图片数量
  2、CSS引用63-65行，可修改：整体位置/尺寸/样式
  3、JS参数说明：gavin.Accordion(a,t1,t2)
  

  a：DOM节点，t1：滚动间隔时间，t2：滚动执行时间

• 带下标上下滚动 scrollSubY

  • 
  • 
  • 
  • 
  • 

  12345

  使用说明：

  1、HTML引用199-210行，可修改：图片数量
  2、CSS引用68-73行，可修改：下标位置/样式，整体尺寸
  3、JS参数说明：gavin.scrollSubY(a,t1,t2)
  

  a：DOM节点，t1：滚动间隔时间，t2：滚动执行时间

• 全屏漂浮图标 fullFly

  X

  使用说明：

  1、HTML引用255行，可修改：浮标图片/关闭按钮
  2、CSS引用76-78行，可修改：关闭按钮样式
  3、JS参数说明：gavin.fullFly(a,x,y,s,m)
  

  a:DOM节点,x:起始横坐标,y:起始纵坐标,s:每次移动的距离(px),m:动画间隔时间