<div class="codetitle"> <span><a style="CURSOR: pointer" data="59185" class="copybut" id="copybut59185" onclick="doCopy('code59185')"><u>复代码码</u></a></span> 代码如下:</div> <div class="codebody" id="code59185"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 전환//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><머리> <br><meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <br><title>JS左右无缝滚动（一般方法 面向对象方法）</title> <br><style type="text/css"> <br>.clearfix:after {content:"."; 표시:블록; 높이:0; 가시성:숨김; 지우기:둘 다; } <br>.clearfix { *zoom:1; } <br>본체{배경:회색;} <br>#wrap{너비:810px; 높이:160px; <br>테두리: 1px 단색 검정색; <br>위치:상대적; <br>왼쪽:50%; <br>상위:50%; <br>왼쪽 여백:-410px; <br>여백 상단:200px; <br>배경:#fff; <br>overflow:hidden;} <br>#wrap ul{margin:0px; <br>패딩:0px; <br>위치:절대; <br>상단:0px; <br>왼쪽:0px;} <br>#wrap ul li{ list-style:none; float:left;margin:5px 10px;width:265px;} <br>#wrap ul li img{ border:1px black solid; 패딩:10px;} <br></style> <br><!--script type="text/javascript"> <br>window.onload=function(){ //하나의 방법 <br>var Wrap=document.getElementById("wrap"); <br>var Wrap_ul=wrap.getElementsByTagName("ul")[0]; <br>var Wrap_li=wrap.getElementsByTagName("li"); <br>wrap_ul.innerHTML =wrap_ul.innerHTML; <br>wrap_ul.style.width=(wrap_li[0].offsetWidth 20)*wrap_li.length "px"; <br>자동스크롤=setInterval(scroll,100); <br>함수 스크롤(){ <br>wrap_ul.style.left=wrap_ul.offsetLeft-3 "px"; //여기서 offsetLeft를 사용하지 않는 것이 좋습니다. 아니면 3번째로 <br>if(wrap_ul.offsetLeft<=-wrap_ul.offsetWidth/2){ <BR>wrap_ul.style.left=" 0px"; <BR>}else if(wrap_ul.offsetLeft>=0){ <br>wrap_ul.style.left=-wrap_ul.offsetWidth/2 "px"; <br>} <br>} <br>wrap.onmouseover=function(){ <br>clearInterval(Autoscroll); <br>} <br>wrap.onmouseout=function(){ <br>Autoscroll=setInterval(scroll,100); <br>} <br>} <br></script--> <br><script type="text/javascript"> <br>function Slide(obj,direction,speed){ //화면에 표시되는 방법, 자동 실행, 속도=>3 ie下可以 <br>this.container=document.getElementById(obj); <br>this.content=this.container.getElementsByTagName("ul")[0]; <br>this.lis=this.content.getElementsByTagName("li"); <br>this.content.innerHTML =this.content.innerHTML; <br>this.content.style.width=(this.lis[0].offsetWidth 20)*this.lis.length "px"; <br>var that=this <br>if(direction=="left"){ <br>this.speed=-speed <br>}else if(direction=="right"){ <br>this.speed =속도 <br>} <br>Slide.prototype.scroll=function(){ <br>this.content.style.left=this.content.offsetLeft this.speed "px"; <br>if(this.content.offsetLeft <= -this.content.offsetWidth/2){ <BR>this.content.style.left ="0px"; <BR>}else if(this.content.offsetLeft >=0){ <br>this.content.style.left = -this.content.offsetWidth/2 "px"; <br>} <br>} <br>this.time=setInterval(function(){that.scroll()},100); <br>this.container.onmouseover=function(){ <br>clearInterval(that.time); <br>} <br>this.container.onmouseout=function(){ <br>that.time=setInterval(function(){that.scroll()},100); <br>} <br>} <br></script> <br><script type="text/javascript"> <br>window.onload=function(){new Slide("wrap","left",5)} <br></script> <br><br></head> <br><br><본문> <br><div id="wrap"> <br><ul class="clearfix"> <br><li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></ 리> <br><li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></ 리> <br><li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></ 리> <br><li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></ 리> <br><li><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></ 리> <br></ul> <br></div> <br></body> <br></html> <br> </div>
웹 프론트엔드
JS 튜토리얼
JS 심리스 좌우스크롤(일반방식 객체지향 방식)_javascript 스킬
