连续滚动图片JavaScript 代码

最新推荐文章于 2021-06-07 19:36:55 发布

转载最新推荐文章于 2021-06-07 19:36:55 发布 · 868 阅读

文章标签：

#javascript #border #function

其他专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的图片滚动效果案例。通过设置定时器，文章中的图片可以在一个指定区域内水平滚动显示。当鼠标悬停在该区域时，滚动会暂停；鼠标移开后，滚动继续。此案例适用于网页设计中需要动态展示多个图片的情况。

//more javascript from http://www.smallrain.net

document.write('<table align=center width=774 border=0 cellpadding=0 cellspacing=0 style=BORDER-LEFT: #cccccc 1px solid;BORDER-RIGHT: #cccccc 1px solid>');

document.write(' <tr> ');

document.write(' <td width=774 height=120 align=center class=border01 bgcolor=#FFFFFF>');

document.write(' <div id=demo style=overflow:hidden;width:750;align=center>');

document.write(' <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >');

document.write(' <tr>');

document.write(' <td valign=top bgcolor=ffffff id=marquePic1> ');

document.write(' <table width=90% border=0 cellspacing=0 cellpadding=0>');

document.write(' <tr align=center> ');

document.write(' <td><a href="#" target="new"><img src=http://www.smallrain.net/jsimg/1.jpg width=150 height=100 hspace=2 border=0></a></td>');

document.write(' <td><a href="#" target="new"><img src=http://www.smallrain.net/jsimg/2.jpg width=150 height=100 hspace=2 border=0></a></td>');

document.write(' <td><a href="#" target="new"><img src=http://www.smallrain.net/jsimg/4.jpg width=150 height=100 hspace=2 border=0></a></td>');

document.write(' <td><a href="#" target="new"><img src=http://www.smallrain.net/jsimg/5.jpg width=150 height=100 hspace=2 border=0></a></td>');

document.write(' <td><a href="#" target="new"><img src=http://www.smallrain.net/jsimg/6.jpg width=150 height=100 hspace=2 border=0></a></td>');

document.write(' </tr>');

document.write(' </table>');

document.write(' </td>');

document.write(' <td id=marquePic2 valign=top></td>');

document.write(' </tr>');

document.write(' </table>');

document.write(' </div>');

document.write(' </td>');

document.write(' </tr>');

document.write(' </table>');

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>