0
(0)

最近做一个单页，需要使用到js实现左右产品滚动效果，发现很多代码在一起会发生冲突。最终找到一个上下左右可以在一个页面任意滚动的代码。这里记录下来，需要的朋友可以直接使用了：

1、产品图片向上无缝滚动代码：

  1. <！–向上滚动代码开始–>
  2. <div id=“colee” style=“overflow:hidden;height:253px;width:410px;”>
  3. <div id=“colee1”>
  4. <p><img src=“”></p>
  5. <p><img src=“”></p>
  6. <p><img src=“”></p>
  7. <p><img src=“”></p>
  8. <p><img src=“”></p>
  9. <p><img src=“”></p>
  10. <p><img src=“”></p>
  11. <p><img src=“”></p>
  12. <p><img src=“”></p>
  13. </div>
  14. <div id=“colee2”></div>
  15. </div>
  16. <script>
  17. var speed=30;
  18. var colee2=document.getElementById(“colee2”);
  19. var colee1=document.getElementById(“colee1”);
  20. var colee=document.getElementById(“colee”);
  21. colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
  22. function Marquee1(){
  23. //当滚动至colee1与colee2交界时
  24. if(colee2.offsetTop-colee.scrollTop<=0){
  25.  colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
  26.  }else{
  27.  colee.scrollTop++
  28. }
  29. }
  30. var MyMar1=setInterval(Marquee1,speed)//设置定时器
  31. //鼠标移上时清除定时器达到滚动停止的目的
  32. colee.onmouseover=function() {clearInterval(MyMar1)}
  33. //鼠标移开时重设定时器
  34. colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
  35. </script>
  37. <!–向上滚动代码结束–>

2、产品向下无缝滚动代码：

  1. <!–下面是向下滚动代码–>
  2. <div id=“colee_bottom” style=“overflow:hidden;height:253px;width:410px;”>
  3. <div id=“colee_bottom1”>
  4. <p><img src=“/jscss/demoimg/200907/bg3.jpg”></p>
  5. <p><img src=“/jscss/demoimg/200907/bg3.jpg”></p>
  6. <p><img src=“/jscss/demoimg/200907/bg3.jpg”></p>
  7. <p><img src=“/jscss/demoimg/200907/bg3.jpg”></p>
  8. <p><img src=“/jscss/demoimg/200907/bg3.jpg”></p>
  9. <p><img src=“/jscss/demoimg/200907/bg3.jpg”></p>
  10. <p><img src=“/jscss/demoimg/200907/bg3.jpg”></p>
  11. <p><img src=“/jscss/demoimg/200907/bg3.jpg”></p>
  12. <p><img src=“/jscss/demoimg/200907/bg3.jpg”></p>
  13. </div>
  14. <div id=“colee_bottom2”></div>
  15. </div>
  16. <script>
  17. var speed=30
  18. var colee_bottom2=document.getElementById(“colee_bottom2”);
  19. var colee_bottom1=document.getElementById(“colee_bottom1”);
  20. var colee_bottom=document.getElementById(“colee_bottom”);
  21. colee_bottom2.innerHTML=colee_bottom1.innerHTML
  22. colee_bottom.scrollTop=colee_bottom.scrollHeight
  23. function Marquee2(){
  24. if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)
  25. colee_bottom.scrollTop+=colee_bottom2.offsetHeight
  26. else{
  27. colee_bottom.scrollTop–
  28. }
  29. }
  30. var MyMar2=setInterval(Marquee2,speed)
  31. colee_bottom.onmouseover=function() {clearInterval(MyMar2)}
  32. colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
  33. </script>
  35. <!–向下滚动代码结束–>

3、向左无缝滚动代码：

  1. <!–下面是向左滚动代码–>
  2. <div id=“colee_left” style=“overflow:hidden;width:500px;”>
  3. <table cellpadding=“0” cellspacing=“0” border=“0”>
  4. <tr><td id=“colee_left1” valign=“top” align=“center”>
  5. <table cellpadding=“2” cellspacing=“0” border=“0”>
  6. <tr align=“center”>
  7. <td><p><img src=“/jscss/demoimg/200907/bg3.jpg”></p></td>
  8. <td><p><img src=“/jscss/demoimg/200907/bg3.jpg”></p></td>
  9. <td><p><img src=“/jscss/demoimg/200907/bg3.jpg”></p></td>
  10. <td><p><img src=“/jscss/demoimg/200907/bg3.jpg”></p></td>
  11. <td><p><img src=“/jscss/demoimg/200907/bg3.jpg”></p></td>
  12. <td><p><img src=“/jscss/demoimg/200907/bg3.jpg”></p></td>
  13. <td><p><img src=“/jscss/demoimg/200907/bg3.jpg”></p></td>
  14. </tr>
  15. </table>
  16. </td>
  17. <td id=“colee_left2” valign=“top”></td>
  18. </tr>
  19. </table>
  20. </div>
  21. <script>
  22. //使用div时，请保证colee_left2与colee_left1是在同一行上.
  23. var speed=30//速度数值越大速度越慢
  24. var colee_left2=document.getElementById(“colee_left2”);
  25. var colee_left1=document.getElementById(“colee_left1”);
  26. var colee_left=document.getElementById(“colee_left”);
  27. colee_left2.innerHTML=colee_left1.innerHTML
  28. function Marquee3(){
  29. if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度
  30. colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度
  31. else{
  32. colee_left.scrollLeft++
  33. }
  34. }
  35. var MyMar3=setInterval(Marquee3,speed)
  36. colee_left.onmouseover=function() {clearInterval(MyMar3)}
  37. colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
  38. </script>
  40. <!–向左滚动代码结束–>

4、向右无缝滚动代码：

  1. <!–下面是向右滚动代码–>
  2. <div id=“colee_right” style=“overflow:hidden;width:500px;”>
  3. <table cellpadding=“0” cellspacing=“0” border=“0”>
  4. <tr><td id=“colee_right1” valign=“top” align=“center”>
  5. <table cellpadding=“2” cellspacing=“0” border=“0”>
  6. <tr align=“center”>
  7. <td><p><img src=“/jscss/demoimg/200907/bg3.jpg”></p></td>
  8. <td><p><img src=“/jscss/demoimg/200907/bg3.jpg”></p></td>
  9. <td><p><img src=“/jscss/demoimg/200907/bg3.jpg”></p></td>
  10. <td><p><img src=“/jscss/demoimg/200907/bg3.jpg”></p></td>
  11. <td><p><img src=“/jscss/demoimg/200907/bg3.jpg”></p></td>
  12. </tr>
  13. </table>
  14. </td>
  15. <td id=“colee_right2” valign=“top”></td>
  16. </tr>
  17. </table>
  18. </div>
  19. <script>
  20. var speed=30//速度数值越大速度越慢
  21. var colee_right2=document.getElementById(“colee_right2”);
  22. var colee_right1=document.getElementById(“colee_right1”);
  23. var colee_right=document.getElementById(“colee_right”);
  24. colee_right2.innerHTML=colee_right1.innerHTML
  25. function Marquee4(){
  26. if(colee_right.scrollLeft<=0)
  27. colee_right.scrollLeft+=colee_right2.offsetWidth
  28. else{
  29. colee_right.scrollLeft–
  30. }
  31. }
  32. var MyMar4=setInterval(Marquee4,speed)
  33. colee_right.onmouseover=function() {clearInterval(MyMar4)}
  34. colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
  35. </script>
  37. <!–向右滚动代码结束–>
声明：本站分享的WordPress主题/插件均遵循 GPLv2 许可协议（免费开源），相关介绍资料仅供学习参考，实际版本可能会因版本迭代或开发者调整而产生变化，如程序中涉及有第三方原创图像、设计模板、远程服务等内容，应获得作者授权后方可使用。本站不提供该程序/软件的产品授权与技术服务，亦不收取相关费用。