提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

JS图片无缝滚动(简单利于使用)

JS 使用 简单 图片 无缝 滚动
2023-06-13 09:15:01 时间

原样复制后，几乎不需要改动就能用了！有问题大家讨论

复制代码代码如下:


 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-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:0auto;}
.left_1ul{}
.left_1li{float:left;width:120px;height:100px;line-height:100px;text-align:center;}
.left_1p{width:50px;he
 100px;line-height:100px;}
.left_1_idiv{width:100px;height:100px;line-height:100px;border:1pxsolid#e5e5e5;margin-left:10px;padding-left:10px;}
</style>
<scriptlanguage="javascript">
functionscrollSZ(con_id,speed,direct){
 varcon,items,heightHalf,heightAll;
 vartimer;
 speed=parseInt(speed);//获取设置的速度参数
 con=document.getElementById(con_id);
 con.style.overflow="hidden";
 if(direct=="top"){
 direct="top";
 }elseif(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(vari=0;i<items.length;i++){
 varnumTop,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);
 }elseif(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);
  }elseif(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;
 }
 }
}
functionscrollSP(con_id,speed,direct){
 varcon,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(vari=0;i<items.length;i++){

 }

 for(vari=0;i<items.length;i++){
 varnumLeft,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";
 }elseif(direct=="right"){
 direct="right";
 }else{
 direct="left"
 }
 if(direct=="left"){
 timer=setInterval(_scrollLeft,speed);
 }elseif(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;
 }
 }
}
functiongetChildNodes(obj){//获取元素子节点
 varchildList,list;
 childList=newArray();
 list=obj.childNodes;
 for(vari=0;i<list.length;i++){
 if(list[i].nodeType==1)
 childList[childList.length]=list[i];
 }
 returnchildList;
}
</script>
</head>
<body>


<divid="left_1"class="left_1">
 <divclass="left_1_i">
 <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <div>b</div>
    <div>a</div>
 </div>
</div>
<scriptlanguage="javascript">scrollSP("left_1",10,"right");</script>
</body>
</html>

 

相关文章