js 실용적인 논스톱 스크롤 효과(호환성 좋음)_이미지 특수 효과

기본적으로 구조와 동작이 분리되어 있습니다.
ID가 하나만 필요하며 동일한 js 코드로 이 페이지에서 여러 스크롤 차트 효과를 얻을 수 있습니다.
1.xhtml

코드 복사 코드는 다음과 같습니다.

< ;div class="demo" id="demo1">
;ul>

스크롤 1

스크롤 차트 2

스크롤 차트 3

;

그림 4 스크롤
< /tr>

; img src="img.jpg">

스크롤 1
스크롤 차트 2

• 
  
  스크롤 차트 3


• 
  
  스크롤 그림 4

테이블>

2.css




코드 복사

코드는 다음과 같습니다. ul,li,img,td{font-size:12px;list-style-type:none;text-align:center;margin:0;padding: 0;} .demo{width:230px;margin-bottom:8px;height:172px;overflow:hidden;} .demo ul{width:408px;clear:both;}

.demo li {너비: 102px;float:left;text-align:center;}

.demo img{margin-bottom:8px;}



3.js

코드 복사

코드는 다음과 같습니다. function startmarquee(lh,speed,delay,index) { var o =document.getElementById("demo" index); var o_td=o.getElementsByTagName("td")[0];

var str=o_td.innerHTML; =document.createElement(" td");

newtd.innerHTML=str;
o_td.parentNode.appendChild(newtd);
var p=false; onmouseover=function(){ p=true;}
o.onmouseout=function() {p=false;}
function start(){
t=setInterval(Marquee,speed)
if(!p){ o.scrollLeft = 3;}
}
function Marquee(){
if(o_td.offsetWidth-o.scrollLeft<=0)
o.scrollLeft-=o_td .offsetWidth;
else{
if(o.scrollLeft%lh!=0){
o.scrollLeft = 3
}else{clearInterval(t); setTimeout(start,delay);}
}
}
setTimeout(start,delay);
}
startmarquee(102,1,1500,1);//사진 간 스크롤 중지
startmarquee(102,30 ,1,2) ;//이미지의 중단 없는 스크롤


테스트 코드: 정상적으로 실행하려면 html 파일을 로드한 후 js를 실행해야 하므로 원칙적으로 div 뒤에 js를 입력해야 합니다. 이미지 스크롤과 텍스트 스크롤의 방식은 거의 동일합니다.
데모 코드:

• 스크롤 차트 1
• 
  스크롤 차트 2
• 
  그림 3 스크롤
• 
  그림 4 스크롤

• 
  滚动图1
• 
  滚动图2
• 
  滚动图3
• 
  滚动图4

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]
In 코드는 102 입니다. 사진의 너비는 코드에서 수정이 가능하며, 사진 크기에 맞는 너비로만 완벽하게 실행될 수 있습니다.