JS picture seamless scrolling (simple and easy to use)_javascript skills

After copying it as it is, it can be used with almost no modifications! If you have any questions, let’s discuss

Copy code The code is as follows: 滚动代码 *{ 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;} 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 return; } heightAll = 0; for(var i=0;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 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 return; } widthAll = 0; for(var i=0;i<items.length;i ){

}

for(var i=0;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 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 if(list[i].nodeType == 1) childList[childList.length] = list[i]; } return childList; } 1

2

3

4

b a scrollSP("left_1",10,"right");

JS picture seamless scrolling (simple and easy to use)_javascript skills

Related articles