JS面向对象方法:图片不间断向左滚动代码

2012-07-04 01:55:45  来源:网页教学网 

网页制作Webjx文章简介:图片无缝向左滚动的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>

</html>

更多