html图片循环滚动无缝隙

html-css013

html图片循环滚动无缝隙,第1张

html图片循环滚动无缝隙代码：

<!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/htmlcharset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

/*gundongtupian*/

#demo0 {

width:712px

height:134px

overflow:hidden

margin:auto

}

#demo0 img {

float:left

margin-left:10px

border:3px #ffffff solid

}

#indemo0 {

float: left

width: 800%

}

#demo10 {

float: left

}

#demo20 {

float: left

}

</style>

</head><body>

<div id="demo0">

<div id="indemo0">

<div id="demo10">

<a href="#"><img src="images/tu1.jpg" width="167" height="128" border="0" /></a>

<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>

<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>

<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>

<a href="#"><img src="images/tu1.jpg" width="168" height="128" border="0" /></a>

</div>

<div id="demo20"></div>

</div>

</div>

<script language="javascript">

<!--

var speed0=40//数字越大速度越慢

var tabb=document.getElementById("demo0")

var tabb1=document.getElementById("demo10")

var tabb2=document.getElementById("demo20")

tabb2.innerHTML=tabb1.innerHTML+tabb1.innerHTML

function Marquee2(){

if(tabb2.offsetWidth-tabb.scrollLeft<=0)

tabb.scrollLeft-=tabb1.offsetWidth

else{

tabb.scrollLeft++

}

}

var MyMar2=setInterval(Marquee2,speed0)

tabb.onmouseover=function(){clearInterval(MyMar2)}

tabb.onmouseout=function(){MyMar2=setInterval(Marquee2,speed0)}

-->

</script>

</body>

</html>

<DIV id=demo style="OVERFLOW: hiddenWIDTH: 600pxHEIGHT: 190pxtop:485pxleft:252pxposition: absolute">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td valign="top" id=demo1>

<!-- 要循环滚动的图片 -->

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" >

<tr>

<td width="200" align="center" style="height: 151px">

<a href="WebDeSign.aspx">

<img src="images/indexpic1.gif" width="194" height="147" border="0" /></a>

</td>

<td width="200" align="center" style="height: 151px">

<a href="SoftWare.aspx">

<img src="images/indexpic2.gif" width="194" height="147" border="0" /></a>

</td>

<td align="center" style="height: 151pxwidth: 200px">

<a href="VhostIndex.aspx">

<img src="images/indexpic3.gif" width="194" height="147" border="0" /></a>

</td>

</tr>

</table>

</td>

<TD id=demo2 width=1></TD>

</tr>

</table>

</DIV>

<SCRIPT>

var speed=30//速度数值越大速度越慢

var demo2 = document.getElementById("demo2")

var demo = document.getElementById("demo")

var demo1 = document.getElementById("demo1")

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</SCRIPT>

自己站的效果

你可以访问 http://b1.gd.cn

希望对你有帮助。。(*^__^*)