| 文章简介：图片无缝向左滚动的JavaScript代码，本文是一个实例，webjx网友可以把图片地址改为自己的图片地址在本地浏览测试。 |
图片无缝向左滚动的javaSCRIPT代码，本文是一个实例，webjx网友可以把图片地址改为自己的图片地址在本地浏览测试。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片无缝向左滚动的JAVASCRIPT代码- 搞代码网webjx.com</title>
<style type="text/css">
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
body{background:gray;}
#wrap{width:810px; height:160px;
border:1px solid black;
position:relative;
left:50%;
top:50%;
margin-left:-410px;
margin-top:200px;
background:#fff;
overflow:hidden;}
#wrap ul{margin:0px;
padding:0px;
position:absolute;
top:0px;
left:0px;}
#wrap ul li{ list-style:none; float:left;margin:5px 10px;width:265px;}
#wrap ul li img{ border:1px black solid; padding:10px;}
</style>
<script type="text/javascript">
function Slide(obj,direction,speed){
this.container=document.getElementById(obj);
this.content=this.container.getElementsByTagName("ul")[0];
this.lis=this.content.getElementsByTagName("li");
this.imgs=this.content.getElementsByTagName("img");
this.content.innerHTML+=this.content.innerHTML;
this.content.style.width=(this.lis[0].offsetWidth+20)*this.lis.length+"px";
var that=this
if(direction=="left"){
this.speed=-speed
}else if(direction=="right"){
this.speed=speed
}
this.time=setInterval(function(){
that.content.style.left=that.content.offsetLeft+that.speed+"px";
if(that.content.offsetLeft <= -that.content.offsetWidth/2){
that.content.style.left ="0px";
}else if(that.content.offsetLeft >=0){
that.content.style.left = -that.content.offsetWidth/2 + "px";
}
},30)
for(var i=0;i<this.imgs.length;i++){
that.imgs[i].onmouseover = function(){
clearInterval(that.time)
}
that.imgs[i].onmouseout=function(){
that.time=setInterval(function(){
that.content.style.left=that.content.offsetLeft+that.speed+"px";
if(that.content.offsetLeft <= -that.content.offsetWidth/2){
that.content.style.left ="0px";
}else if(that.content.offsetLeft >=0){
that.content.style.left = -that.content.offsetWidth/2 + "px";
}
},30)
}
}
}
</script>
<script type="text/javascript">
window.onload=function(){new Slide("wrap","left",5)}
</script>
</head>
<body>
<div id="wrap">
<ul class="clearfix">
<li><a href="#"><img src="图片地址" /></a></li>
<li><a href="#"><img src="图片地址" /></a></li>
<li><a href="#"><img src="图片地址" /></a></li>
<li><a href="#"><img src="图片地址" /></a></li>
<li><a href="#"><img src="图片地址" /></a></li>
</ul>
</div>
</body>
http://www.gaodaima.com/29763.html
</html>
欢迎大家阅读《js面向对象方法:图片不间断向左滚动代码…_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码
转载请注明原文链接：JS面向对象方法:图片不间断向左滚动代码_js
