Posted in Javascript onJune 17, 2013
原样复制后,几乎不需要改动就能用了!有问题大家讨论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滚动代码</title> <style> *{ margin:0; padding:0;} ul,li{ list-style:none;} .left_1{ width:500px; height:100px; margin:0 auto;} .left_1 ul{} .left_1 li{ float:left; width:120px; height:100px; line-height:100px; text-align:center;} .left_1 p{ width:50px; he 100px; line-height:100px;} .left_1_i div{ width:100px; height:100px; line-height:100px; border:1px solid #e5e5e5; margin-left:10px; padding-left:10px;} </style> <script language="javascript"> function scrollSZ(con_id,speed,direct){ var con,items,heightHalf,heightAll; var timer; speed = parseInt(speed);//获取设置的速度参数 con = document.getElementById(con_id); con.style.overflow = "hidden"; if(direct == "top"){ direct = "top"; }else if(direct == "bottom"){ direct = "bottom"; }else{ direct = "top"; } con.innerHTML +=con.innerHTML; con.innerHTML +=con.innerHTML; items = getChildNodes(con); if(items.length < 1){ return; } heightAll = 0; for(var i=0;i<items.length;i++){ var numTop,numBottom; if (!!window.ActiveXObject){ numTop = items[i].currentStyle["marginTop"]; numBottom = items[i].currentStyle["marginBottom"]; }else{ numTop = document.defaultView.getComputedStyle(items[i],null)["marginTop"]; numBottom = document.defaultView.getComputedStyle(items[i],null)["marginBottom"]; } numTop = parseInt(numTop); numBottom = parseInt(numBottom); numTop += numBottom; if(numTop >0){ heightAll += numTop; } heightAll += items[i].offsetHeight; } heightHalf = heightAll/2; if(direct == "bottom"){ con.scrollTop = heightHalf; timer = setInterval(_scrollBottom,speed); }else if(direct == "top"){ timer = setInterval(_scrollTop,speed); } con.onmouseover = function(){ if(timer){ clearInterval(timer); timer = null; } }; con.onmouseout = function(){ if(!timer){ if(direct == "top"){ timer = setInterval(_scrollTop,speed); }else if(direct == "bottom"){ timer = setInterval(_scrollBottom,speed); } } }; function _scrollTop(){ if(con.scrollTop < heightHalf){ con.scrollTop += 2; }else{ con.scrollTop = 0; } } function _scrollBottom(){ if(con.scrollTop > 0){ con.scrollTop -= 2; }else{ con.scrollTop = heightHalf; } } } function scrollSP(con_id,speed,direct){ var con,innerCon,timer,items,widthAll,widthHalf; speed = parseInt(speed); con = document.getElementById(con_id); con.style.overflow = "hidden"; items = getChildNodes(con); if(items.length == 1){ innerCon = items[0]; }else{ return; } innerCon.innerHTML += innerCon.innerHTML; innerCon.innerHTML += innerCon.innerHTML; items = getChildNodes(innerCon); if(items.length<1){ return; } widthAll = 0; for(var i=0;i<items.length;i++){ } for(var i=0;i<items.length;i++){ var numLeft,numRight; if (!!window.ActiveXObject){ items[i].style.styleFloat = "left"; numLeft = items[i].currentStyle["marginLeft"]; numRight = items[i].currentStyle["marginRight"]; }else{ items[i].style.cssFloat = "left"; numLeft = document.defaultView.getComputedStyle(items[i],null)["marginLeft"]; numRight = document.defaultView.getComputedStyle(items[i],null)["marginRight"]; } numLeft = parseInt(numLeft); numRight = parseInt(numRight); numLeft += numRight; if(numLeft>0){ widthAll += numLeft; } widthAll += items[i].offsetWidth; } widthHalf = widthAll/2; innerCon.style.width = widthAll+"px"; if(direct == "left"){ direct = "left"; }else if(direct == "right"){ direct = "right"; }else{ direct = "left" } if(direct == "left"){ timer = setInterval(_scrollLeft,speed); }else if(direct == "right"){ con.scrollLeft = widthHalf; timer = setInterval(_scrollRight,speed); } con.onmouseover = function(){ if(timer){ clearInterval(timer); timer = null; } } con.onmouseout = function(){ if(direct == "left"){ timer = setInterval(_scrollLeft,speed); }else{ timer = setInterval(_scrollRight,speed); } } function _scrollLeft(){ if(con.scrollLeft<widthHalf){ con.scrollLeft += 2; }else{ con.scrollLeft = 0; } } function _scrollRight(){ if(con.scrollLeft>0){ con.scrollLeft -= 2; }else{ con.scrollLeft = widthHalf; } } } function getChildNodes(obj){//获取元素子节点 var childList,list; childList = new Array(); list = obj.childNodes; for(var i=0;i<list.length;i++){ if(list[i].nodeType == 1) childList[childList.length] = list[i]; } return childList; } </script> </head> <body> <div id="left_1" class="left_1"> <div class="left_1_i"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <div>b</div> <div>a</div> </div> </div> <script language="javascript">scrollSP("left_1",10,"right");</script> </body> </html>
JS图片无缝滚动(简单利于使用)
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@