<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 Transitional//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 { *ズーム:1; } <br>body{background:gray;} <br>#wrap{width:810px;高さ:160ピクセル; <br>ボーダー: 1 ピクセル黒一色; <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>left:0px;} <br>#wrap ul li{ list-style:none; float:left;margin:5px 10px;width:265px;} <br>#wrap ul li img{ border:1px 黒塗り;パディング: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>Autoscroll=setInterval(scroll,100); <br>functionscroll(){ <br>wrap_ul.style.left=wrap_ul.offsetLeft-3 "px"; //ここではieのoffsetLeftの解析が不一であるため、ieの下は3以上の数でなければなりません <br>if(wrap_ul.offsetLeftwrap_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){ //面方向のオブジェクトのメソッド、方向を自由に制御できます、speed=>3 つまり、<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 =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="ラップ"> <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>
