素材的准备。为了更好的表现网站的风格和特色，具备一些更富表现力和吸引力的图片是必不可少的。同理，准备了一些与网页主题密切相关的图片，用于做为实现图片滚动效果的素材。
打开Dreamweaver8，新建一网页文件，并保存为名为“index.html"文件。
切换至代码编辑界面，输入如下代码：
<body><div id="photo-list"> <ul id="scroll">
<li><a href="#"><img src="images/1.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/2.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/3.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/4.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/5.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/6.jpg" width="100px" height="100px" alt=""/></a></li> </ul></div></body>
对应效果如图所示：
新建一CSS样式表文件，并将该文件保存到与“index.html”相同的目录下，文件名称为“MyStyle.css"。
在新建的样式表文件"MyStyle.css”文件中输入如下代码：
* { padding:0margin:0} /*设置所有对像的内边距为0*/
body { text-align:center} /*设置页面居中对齐*/
#photo-list {
/* 6张图片的宽度（包含宽度、padding、border、图片间的留白）
计算：6*(100+2*2+1*2+9) - 9
之所以减去9是第6张图片的右边留白 */
width:681px
/* 图片的宽度（包含高度、padding、border）
计算：100+2*2+1*2 */
height:106px
margin:50px auto
overflow:hidden /*溢出部份将被隐藏*/
border:1px dashed #ccc
}
#photo-list ul { list-style:none}
#photo-list li { float:leftpadding-right:9px}
#photo-list img { border:1px solid #dddbackground:#fffpadding:2px}
对应文件内容如图所示：
在网页文件"index.html"中添加对该样式表的引用：
<link rel="stylesheet" type="text/css" href="MyStyle.css">
此时网页效果如图所示：
新建一个JS文件，并将该文件另存为“MoveEffect.js"。
在”MoveEffect.js“文件中输入如下所示代码：
var id = function(el) { return document.getElementById(el) },
c = id('photo-list')
if(c) {
var ul = id('scroll'),
lis = ul.getElementsByTagName('li'),
itemCount = lis.length,
width = lis[0].offsetWidth, //获得每个img容器的宽度
marquee = function() {
c.scrollLeft += 2
if(c.scrollLeft % width <= 1){ //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面
ul.appendChild(ul.getElementsByTagName('li')[0])
c.scrollLeft = 0
}
},
speed = 50//数值越大越慢
ul.style.width = width*itemCount + 'px'//加载完后设置容器长度
var timer = setInterval(marquee, speed)
c.onmouseover = function() {
clearInterval(timer)
}
c.onmouseout = function() {
timer = setInterval(marquee, speed)
}
}
然后在主页文件"index.html”中添加对该“MoveEffect.js”文件的引用。
<script type="text/javascript" src="MoveEffect.js"></script>
代码如图所示：
打开“index.html”网页文件，最终效果如果所示：
假设你要滚动的图片的id是"pic1"-"picn"n>=1
function Slide()
{
for （i=1i<=ni++) //n是图片数
{
idd="pic"+i //生成图片ID
toppx=parseInt(document.getElementById(idd).style.top.replace('px', '')) //获取图片top属性，并去掉属性之后的px，并转换成整型变量
toppx--// top-1
if （toppx==???)//???是一个数字，当图片完全滚出显示范围，就把图片的top变成一个图片群(多行pic)下方的位置，实现循环滚动
{
toppx=???//图片群的下方的位置
}
document.getElementById(idd).style.top=toppx+'px' //新的top值送回图片，实现上滚
}
}
另外记得，这样写，需要把图片的top属性写在html里面，写在css里面是读不到的，但是这样写避免了不同浏览器中获取css中属性的方法不同的问题，有利有弊。
当需要滚动时执行：s=setInterval('Slide()',50)
当需要停止滚动时执行：window.clearInterval(s)
