第四步:将以下代码在编辑器的代码视图里插入到合适的位置:
<style type="text/css"> img{ border:0px; } </style> <!-- 指向链接图片url --> <div id=demo style=overflow:hidden;height:600;width:290;background:#000000;color:#ffffff> <div id=demo1> <!-- 定义图片 --> <a href="http://www.51rich.net" target="_blank"><img src="data/up/1.jpg"></a> <a href="http://www.51rich.net" target="_blank"><img src="data/up/2.jpg"></a> <a href="http://www.51rich.net" target="_blank"><img src="data/up/3.jpg"></a> <a href="http://www.51rich.net" target="_blank"><img src="data/up/4.jpg"></a> <a href="http://www.51rich.net" target="_blank"><img src="data/up/5.jpg"></a> <a href="http://www.51rich.net" target="_blank"><img src="data/up/6.jpg"></a> <a href="http://www.51rich.net" target="_blank"><img src="data/up/7.jpg"></a> <a href="http://www.51rich.net" target="_blank"><img src="data/up/8.jpg"></a> <a href="http://www.51rich.net" target="_blank"><img src="data/up/9.jpg"></a> </div> <div id=demo2></div> </div>
<script> var speed=10 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>
|
代码解释:
1、其中9行蓝色代码是分别是9张图的代码(即第1行是1.jpg这张图的代码,如此类推),如果您的图片不是9张,可以相应地增加或者减少几行代码!每行代码的区别就是图片文件名不同!第1行是1.jpg 第2行是2.jpg 2、蓝色这行代码中,绿色标记的网址,是指点击这张图片后要链接的新网页的网址,可以修改成自己的网址。 3、background:#000000代表背景色是黑色,修改此颜色代码,即可改背景色。 4、height:600;width:290代表滚动窗口的高度和宽度,如果您的图片不是290宽的,可以将290这个高度改成相应的值 5、var speed=10 这是控制滚动速度的,修改10 这个数值即可。数值越大,速度越慢。 6、如果图片要加上边框,就把最前面的以下这几行代码删除即可 <style type="text/css"> img{ border:0px; } </style> 效果图如下:
|