如何用JS实现在表格内横向滚动图片

JavaScript021

如何用JS实现在表格内横向滚动图片,第1张

<table valign=top width=770 >

<tr>

<td width=770 valign=top >

<div id="demo" style="overflow:hiddenwidth:770">

<table >

<tr>

<td valign="top" id="marquePic1">

<table width=770>

<tr align="top">

<td><table><tr>

<!--数目-->

<td ><a href="#" ><img alt="javascript 图片左右滚动效果代码" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>

<td ><a href="#" ><img alt="javascript 图片左右滚动效果代码" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>

<td ><a href="#" ><img alt="javascript 图片左右滚动效果代码" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>

<td ><a href="#" ><img alt="javascript 图片左右滚动效果代码" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>

<td ><a href="#" ><img alt="javascript 图片左右滚动效果代码" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>

<td ><a href="#" ><img alt="javascript 图片左右滚动效果代码" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>

<td ><a href="#" ><img alt="javascript 图片左右滚动效果代码" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>

<!--数目-->

</tr></table></td>

</tr>

</table>

</td>

<td id=marquePic2 valign=top></td>

</tr>

</table>

</div>

</td>

</tr>

</table>

<script type="text/javascript">

var speed=30

marquePic2.innerHTML=marquePic1.innerHTML

function Marquee(){

if(demo.scrollLeft>=marquePic1.scrollWidth){

demo.scrollLeft=0

}else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

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

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

</script>

内容要够多才会滚,你只放一两张图进去宽度不够就不会动。

<SCRIPT language="JavaScript">

var speed=50//设置滚动速度

demo2.innerHTML=demo1.innerHTML //复制dome1为dome2

function Marquee(){

if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至dome1与dome2交界时

demo.scrollTop-=demo1.offsetHeight //dome跳到最顶端

else{

demo.scrollTop++

}

}

var MyMar=setInterval(Marquee,speed) //设置定时器

demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器,继续滚动

</SCRIPT>

<div id="demo" style="overflow: hiddenheight: 600width: 180background: #214984color: #ffffff">

<div id="demo1" align="center">

<!-- 定义图片 -->

</div>

<div id="demo2" align="center"></div>

</div>

首先准备以下的东西:

1、图片若干,并规范化图片名字。从1开始。

2、在存放图片的文档中新建一个txt。

3、在txt中输入内容。

4、txt后缀改为html,完成

txt的内容:

<script>

var i

function pre()

{

if(i==1)return

i--

document.getElementById("pic").innerHTML="<img src="+i+".jpg></img>"

}

function next()

{

i++

document.getElementById("pic").innerHTML="<img src="+i+".jpg></img>"

}

</script>

<body>

<div onclick="pre()"><</div>

<div id="pic" ><</div>

<div onclick="next()">></div>

</body>