夏日博客

A-A+

javascript中图片无缝滚动代码

2016年01月27日 前端设计 暂无评论 阅读 4 views 次

下面总结了两种关于图片无缝滚动实现代码，有需要的朋友可参考参考。

下面说一下这个相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和 demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。

核心代码如下:

  1. <script>  
  2. var t=setInterval(myfunc,1000)  
  3. var d=document.getElementById("div1")  
  4. function myfunc(){  
  5. var o=d.firstChild  
  6. d.removeChild(o)  
  7. d.appendChild(o)  
  8. }  
  9. d.onmouseover=function(){clearInterval(t)}  
  10. d.onmouseout=function(){t=setInterval(myfunc,1000)}  
  11. </script>  

上面显示的是四行,如果只要1行,或者几行,改这里height:68px,只显示1行:

  1. <div id="div1" style="width:300px;height:15px;overflow:hidden">  

图片滚动,代码如下:

  1. <style>img{display:block}</style>  
  2. <div id="div1" style="width:221px;height:187px;overflow:hidden">  
  3. <img src=/blog/images/logo.gif>  
  4. <img src=/so/images/logo.gif>  
  5. <img src=/web/image/logo2.gif>  
  6. <img src=http://filesimg.111cn.net/2012/11/30/20121130031924684.gif>  
  7. </div>   
  8. <script>  
  9. var t=setInterval(myfunc,1000)  
  10. var d=document.getElementById("div1")  
  11. function myfunc(){  
  12. var o=d.firstChild  
  13. d.removeChild(o)  
  14. d.appendChild(o)  
  15. }  
  16. d.onmouseover=function(){clearInterval(t)}  
  17. d.onmouseout=function(){t=setInterval(myfunc,1000)}  
  18. </script>  

再看个实例,代码如下:

  1. <style type="text/css">  
  2. <!--  
  3. #demo {  
  4.  background: #FFF;  
  5.  overflow:hidden;  
  6.  border: 1px dashed #CCC;  
  7.  width: 500px;  
  8. }  
  9. #demo img {  
  10.  border: 3px solid #F2F2F2;  
  11. }  
  12. #indemo {  
  13.  float: left;  
  14.  width: 800%;  
  15. }  
  16. #demo1 {  
  17.  float: left;  
  18. }  
  19. #demo2 {  
  20.  float: left;  
  21. }  
  22. -->  
  23. </style>  
  24. 向右滚动  
  25. <div id="demo">  
  26. <div id="indemo">  
  27. <div id="demo1">  
  28. <a href="#"><img src="/other/link/Clear_logo.gif" border="0" /></a>  
  29. <a href="#"><img src="/other/link/Clear_logo.gif" border="0" /></a>  
  30. <a href="#"><img src="/other/link/Clear_logo.gif" border="0" /></a>  
  31. <a href="#"><img src="/other/link/Clear_logo.gif" border="0" /></a>  
  32. <a href="#"><img src="/other/link/Clear_logo.gif" border="0" /></a>  
  33. <a href="#"><img src="/other/link/Clear_logo.gif" border="0" /></a>  
  34. </div>  
  35. <div id="demo2"></div>  
  36. </div>  
  37. </div>  
  38. <script>  
  39. <!--  
  40. var speed=10; //数字越大速度越慢  
  41. var tab=document.getElementById("demo");  
  42. var tab1=document.getElementById("demo1");  
  43. var tab2=document.getElementById("demo2");  
  44. tab2.innerHTML=tab1.innerHTML;  
  45. function Marquee(){  
  46. if(tab.scrollLeft<=0)  
  47. tab.scrollLeft+=tab2.offsetWidth  
  48. else{  
  49. tab.scrollLeft--  
  50. }  
  51. }  
  52. var MyMar=setInterval(Marquee,speed);  
  53. tab.onmouseover=function() {clearInterval(MyMar)};  
  54. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};  
  55. -->  
  56. </script>  

一个中级的上、下、左、右滚动代码，Js无缝滚动代码，可以控制滚动速度、滚动方向，而且考虑到了obj.style.attr只能获取到行内样式，因而还增加了JS判断获取确切的外补丁，以消除非行内样式的外补丁对无缝衔接的影响。JS通过四次循环内部元素的方式来保持滚动，所以只要原始内容尺寸超过容器对应尺寸的1/4就能滚动，降低了之前两次循环元素时的滚动门槛。

第一个参数 con_id 是用于JS找到元素的，是滚动元素的id。

第二个参数 speed_num 是用来设置滚动速度的，数值越大，滚动速度越慢；单位默认是毫秒，不用写，只要写个正整数即可。

第三个参数 direct 是用来控制滚动方向的，top/bottom/left/right,如果不是这四个值，则水平滚动默认向左，竖直滚动默认向上。注意几点：

1、水平滚动的容器id给出的容器能且仅能有一个直接子节点！

2、使用方式是在页面头部引入此文件，在需要滚动的容器的闭合标签后调用对应的滚动方法scrollSP(con_id,speed,direct)、scrollSZ(con_id,speed,direct)。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>滚动代码</title>  
  6. <style>  
  7. *{ margin:0; padding:0;}  
  8. ul,li{ list-style:none;}  
  9. .top_1{ height:100px; width:200px; border:1px solid #333333; margin:0 auto;}  
  10. .top_1 p{ height:30px; line-height:30px; margin-top:10px;}  
  11. .left_1{ width:500px; height:100px; margin:0 auto;}  
  12. .left_1 ul{}  
  13. .left_1 li{ float:left; width:120px; height:100px; line-height:100px; text-align:center;}  
  14. .left_1 p{ width:50px; he  
  15.  100px; line-height:100px;}  
  16. .left_1_i div{ width:100px; height:100px; line-height:100px; border:1px solid #e5e5e5; margin-left:10px; padding-left:10px;}   
  17. </style>  
  18. <script language="javascript">  
  19. function scrollSZ(con_id,speed,direct){  
  20.  var con,items,heightHalf,heightAll;  
  21.  var timer;  
  22.  speed = parseInt(speed);//获取设置的速度参数  
  23.  con = document.getElementById(con_id);  
  24.  con.style.overflow = "hidden";  
  25.  if(direct == "top"){  
  26.   direct = "top";  
  27.  }else if(direct == "bottom"){  
  28.   direct = "bottom";  
  29.  }else{  
  30.   direct = "top";  
  31.  }  
  32.    
  33.  con.innerHTML +=con.innerHTML;  
  34.  con.innerHTML +=con.innerHTML;  
  35.  items = getChildNodes(con);  
  36.  if(items.length < 1){  
  37.   return;  
  38.  }  
  39.  heightAll = 0;  
  40.  for(var i=0;i<items.length;i++){  
  41.   var numTop,numBottom;  
  42.   if (!!window.ActiveXObject){  
  43.    numTop = items[i].currentStyle["marginTop"];  
  44.    numBottom = items[i].currentStyle["marginBottom"];  
  45.   }else{  
  46.    numTop = document.defaultView.getComputedStyle(items[i],null)["marginTop"];  
  47.    numBottom = document.defaultView.getComputedStyle(items[i],null)["marginBottom"];  
  48.   }  
  49.   numTop = parseInt(numTop);  
  50.   numBottom = parseInt(numBottom);  
  51.   numTop += numBottom;  
  52.   if(numTop >0){  
  53.    heightAll += numTop;  
  54.   }  
  55.   heightAll += items[i].offsetHeight;  
  56.  }  
  57.  heightHalf = heightAll/2;  
  58.  if(direct == "bottom"){  
  59.   con.scrollTop = heightHalf;  
  60.   timer = setInterval(_scrollBottom,speed);    
  61.  }else if(direct == "top"){  
  62.   timer = setInterval(_scrollTop,speed);  
  63.  }  
  64.  con.onmouseover = function(){  
  65.   if(timer){  
  66.    clearInterval(timer);  
  67.    timer = null;  
  68.   }  
  69.  };  
  70.  con.onmouseout = function(){  
  71.   if(!timer){  
  72.    if(direct == "top"){  
  73.     timer = setInterval(_scrollTop,speed);  
  74.    }else if(direct == "bottom"){  
  75.     timer = setInterval(_scrollBottom,speed);  
  76.    }  
  77.      
  78.   }  
  79.  };  
  80.  function _scrollTop(){  
  81.   if(con.scrollTop < heightHalf){  
  82.    con.scrollTop += 2;  
  83.   }else{  
  84.    con.scrollTop = 0;  
  85.   }  
  86.  }  
  87.  function _scrollBottom(){  
  88.   if(con.scrollTop > 0){  
  89.    con.scrollTop -= 2;  
  90.   }else{  
  91.    con.scrollTop = heightHalf;  
  92.   }  
  93.  }  
  94. }  
  95. function scrollSP(con_id,speed,direct){  
  96.  var con,innerCon,timer,items,widthAll,widthHalf;  
  97.  speed = parseInt(speed);  
  98.  con = document.getElementById(con_id);  
  99.  con.style.overflow = "hidden";  
  100.  items = getChildNodes(con);  
  101.  if(items.length == 1){  
  102.   innerCon = items[0];  
  103.  }else{   
  104.   return;  
  105.  }  
  106.  innerCon.innerHTML += innerCon.innerHTML;  
  107.  innerCon.innerHTML += innerCon.innerHTML;  
  108.  items = getChildNodes(innerCon);  
  109.  if(items.length<1){  
  110.   return;  
  111.  }  
  112.  widthAll = 0;  
  113.  for(var i=0;i<items.length;i++){  
  114.     
  115.  }  
  116.    
  117.  for(var i=0;i<items.length;i++){  
  118.   var numLeft,numRight;  
  119.   if (!!window.ActiveXObject){  
  120.    items[i].style.styleFloat = "left";  
  121.    numLeft = items[i].currentStyle["marginLeft"];  
  122.    numRight = items[i].currentStyle["marginRight"];  
  123.   }else{  
  124.    items[i].style.cssFloat = "left";  
  125.    numLeft = document.defaultView.getComputedStyle(items[i],null)["marginLeft"];  
  126.    numRight = document.defaultView.getComputedStyle(items[i],null)["marginRight"];  
  127.   }   
  128.   numLeft = parseInt(numLeft);  
  129.   numRight = parseInt(numRight);  
  130.   numLeft += numRight;  
  131.   if(numLeft>0){  
  132.    widthAll += numLeft;  
  133.   }  
  134.   widthAll += items[i].offsetWidth;  
  135.  }  
  136.  widthHalf = widthAll/2;   
  137.  innerCon.style.width = widthAll+"px";  
  138.  if(direct == "left"){  
  139.   direct = "left";  
  140.  }else if(direct == "right"){  
  141.   direct = "right";  
  142.  }else{  
  143.   direct = "left"  
  144.  }  
  145.  if(direct == "left"){  
  146.   timer = setInterval(_scrollLeft,speed);  
  147.  }else if(direct == "right"){  
  148.   con.scrollLeft = widthHalf;  
  149.   timer = setInterval(_scrollRight,speed);  
  150.  }  
  151.  con.onmouseover = function(){  
  152.   if(timer){  
  153.    clearInterval(timer);  
  154.    timer = null;  
  155.   }  
  156.  }  
  157.  con.onmouseout = function(){  
  158.   if(direct == "left"){  
  159.    timer = setInterval(_scrollLeft,speed);  
  160.   }else{  
  161.    timer = setInterval(_scrollRight,speed);  
  162.   }  
  163.  }  
  164.  function _scrollLeft(){  
  165.     
  166.   if(con.scrollLeft<widthHalf){  
  167.    con.scrollLeft += 2;  
  168.   }else{  
  169.    con.scrollLeft = 0;  
  170.   }  
  171.  }  
  172.  function _scrollRight(){  
  173.   if(con.scrollLeft>0){  
  174.    con.scrollLeft -= 2;  
  175.   }else{  
  176.    con.scrollLeft = widthHalf;  
  177.   }  
  178.  }  
  179. }  
  180. function getChildNodes(obj){//获取元素子节点  
  181.  var childList,list;  
  182.  childList = new Array();  
  183.  list = obj.childNodes;  
  184.  for(var i=0;i<list.length;i++){  
  185.   if(list[i].nodeType == 1)  
  186.   childList[childList.length] = list[i];  
  187.  }  
  188.  return childList;  
  189. }  
  190. </script>  
  191. </head>  
  192. <body>  
  193. <div id="top_1" class="top_1">  
  194.  <p>1</p>  
  195.     <p>2</p>  
  196.     <p>3</p>  
  197.     <p>4</p>  
  198.     <div>b</div>  
  199.     <p>5</p>  
  200.     <p>6</p>  
  201.     <p>7</p>  
  202.     <div>a</div>  
  203. </div>  
  204. <script language="javascript">scrollSZ("top_1",10,"bottom");</script>  
  205. <div id="left_1" class="left_1">  
  206.  <div class="left_1_i">  
  207.   <p>1</p>  
  208.      <p>2</p>  
  209.      <p>3</p>  
  210.      <p>4</p>  
  211.      <div>b</div>  
  212.      <div>a</div>  
  213.  </div>  
  214. </div>  
  215. <script language="javascript">scrollSP("left_1",10,"right");</script>  
  216. </body>  
  217. </html>  
标签：

给我留言