<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>