相争不足 共享有余

图片左右上下滚动没间隙[建站效果]

编程开发 moonygao 590℃ 0评论

演示效果,直接查看代码 复制就可以用,没有用其他文件或者css  js

演示预览

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<!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>图片左右上下滚动没间隙</title>
</head>

<body>
<p>尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流,请勿用于商业用途。</p>
来源 代码整理:<a href=”/” target=”_blank”>walkcode</a>
<p><br/>
<br/><br/>

这是上下滚动  <br/>  <br/>
</p>
<div id=”demo” style=”overflow:hidden; width:320px; height:350px;”>
<div id=”demo1″>

<li> <img src=”http://www.itqiyi.com/forum.php?mod=image&aid=80&size=300×300&key=add9ad779044b3211f10703b25db1753&nocache=yes&type=fixnone” /></li>
<li><img src=”http://www.itqiyi.com/forum.php?mod=image&aid=83&size=300×300&key=010a3bc765abe2eb3d0bb1d79cc617ba&nocache=yes&type=fixnone” /></li>
<li><img src=”http://www.itqiyi.com/forum.php?mod=image&aid=74&size=300×300&key=2bbe6aadc8a4503c8d2868a16d72d4c8&nocache=yes&type=fixnone” /></li>
</div>
<div id=”demo2″></div>
</div>
<script language=”javascript” type=”text/javascript”>
var speed=50
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

<br/>
<br/>
<br/>
这是左右滚动
<br/>  <br/>  <br/>

<div id=”hj” style=”overflow:hidden; height:110px; width:900px”>
<table align=”left” cellpadding=”0″ cellspace=”0″ border=”0″>
<tr>
<td id=”hj1″>
<table border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td style=”width: 100px”>
<a href=”#”> <img src=”http://www.itqiyi.com/forum.php?mod=image&aid=80&size=300×300&key=add9ad779044b3211f10703b25db1753&nocache=yes&type=fixnone” /></a>
</td>
<td style=”width: 100px”>
<a href=”#”> <img src=”http://www.itqiyi.com/forum.php?mod=image&aid=83&size=300×300&key=010a3bc765abe2eb3d0bb1d79cc617ba&nocache=yes&type=fixnone” /></a>
</td>
<td style=”width: 100px”>
<a href=”#”><img src=”http://www.itqiyi.com/forum.php?mod=image&aid=74&size=300×300&key=2bbe6aadc8a4503c8d2868a16d72d4c8&nocache=yes&type=fixnone” /></a></td>

</tr>
</table>

</td>
<td id=”hj2″></td>
</tr>
</table>
</div>
<script language=”javascript” type=”text/javascript”>
var speed=50
hj2.innerHTML=hj1.innerHTML
function Marquee(){
if(hj2.offsetWidth-hj.scrollLeft<=0)
hj.scrollLeft-=hj1.offsetWidth
else{
hj.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
hj.onmouseover=function() {clearInterval(MyMar)}
hj.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

<table width=”800″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”100″ align=”center”><IMG id=r_l onclick=r_left() src=”images/pre.jpg”></td>
<td><!–demo start–>
<DIV id=demo style=”OVERFLOW: hidden; WIDTH: 600px”>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td id=demo1>
<table width=”500″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”100″ height=”100″ align=”center”><img src=”index_files/zs2.jpg” width=”81″ border=”0″/></td>
<td width=”100″ align=”center”><img src=”index_files/zs2.jpg” width=”81″ border=”0″/></td>
<td width=”100″ align=”center”><img src=”index_files/zs2.jpg” width=”81″ border=”0″/></td>
<td width=”100″ align=”center”><img src=”index_files/zs2.jpg” width=”81″ border=”0″/></td>
<td width=”100″ align=”center”><img src=”index_files/zs2.jpg” width=”81″ border=”0″/></td>
</tr>
</table>
</td>
<td id=demo2 width=”0″></td>
</tr>
</tbody>
</table>
</DIV>
<!–demo end–>
<SCRIPT>
var dir=1//每步移动像素,大=快
var speed=1//循环周期(毫秒)大=慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){//正常移动
//alert(demo2.offsetWidth+”n”+demo.scrollLeft)
if (dir>0 && (demo2.offsetWidth-demo.scrollLeft)<=0) demo.scrollLeft=0
if (dir<0 &&(demo.scrollLeft<=0)) demo.scrollLeft=demo2.offsetWidth
demo.scrollLeft+=dir
demo.onmouseover=function() {clearInterval(MyMar)}//暂停移动
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//继续移动
}
function r_left(){if (dir=-1)dir=1}//换向左移
function r_right(){if (dir=1)dir=-1}//换向右移
var MyMar=setInterval(Marquee,speed)
</SCRIPT></td>
<td width=”100″ align=”center”><IMG id=r_r onclick=r_right() src=”images/next.jpg”></td>
</tr>
</table>
</body>
</html>

转载请注明:IT起义 » 图片左右上下滚动没间隙[建站效果]

喜欢 (0)or分享 (0)