演示地址:http://www.corange.cn/demo/3785/index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动图片</title>
<style type="text/css">
body, h2, p {
margin:0px;
padding:0px;
}

ul, li {
margin:0px;
padding:0px;
list-style-type:none;
}

body {
font-size:12px;
}

.box {
width:960px;
height:114px;
margin:10px auto;
}

.left {
width:19px;
height:67px;
float:left;
display:inline;
cursor:pointer;
margin:23px 0 0 0;
background:url(http://zf4uc1.chinaw3.com/js/marquee/images/sj.jpg) no-repeat 0 0;
}

.left.hove {
background:url(http://zf4uc1.chinaw3.com/js/marquee/images/sj.jpg) no-repeat -19px 0;
}

.right {
width:19px;
height:67px;
float:left;
display:inline;
cursor:pointer;
margin:23px 0 0 0;
background:url(http://zf4uc1.chinaw3.com/js/marquee/images/sj.jpg) no-repeat 0 -67px;
}

.right.hove {
background:url(http://zf4uc1.chinaw3.com/js/marquee/images/sj.jpg) no-repeat -19px -67px;
}

.content {
width:915px;
height:114px;
float:left;
position:relative;
display:inline;
margin:0 0 0 4px;
overflow:hidden;
}

.content ul {
top:0px;
left:0px;
position:absolute;
}

.content ul li {
width:217px;
height:110px;
float:left;
padding:1px;
display:inline;
margin:0 9px 0 0;
border:1px solid #dfdfdf;
}
</style>
<script src="marquee.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
new Marquee("box", "left", "right", "content", {
marquee : 'once'
}, 'hove');
new Marquee("box1", "left", "right", "content");
};
</script>
</head>

<body>
<h1 align="center"><a href="http://www.cnblogs.com/archives/2011/09/05.html">滚动图片，2种效果，一种有首尾，一种没有</a></h1>
<div class="box" id="box">
<div class="left"></div>
<div class="content">
<ul style="width:100px;">
<li><img src="../demo1.jpg" /></li>
<li><img src="../demo2.jpg" /></li>
<li><img src="../demo3.jpg" /></li>
<li><img src="../demo4.jpg" /></li>
<li><img src="../demo5.jpg" /></li>
<li><img src="../demo6.jpg" /></li>
<li><img src="../demo7.jpg" /></li>
<li><img src="../demo8.jpg" /></li>
</ul>
</div>
<div class="right"></div>
</div>
<div class="box" id="box1">
<div class="left"></div>
<div class="content">
<ul style="width:100px;">
<li><img src="../demo1.jpg" /></li>
<li><img src="../demo2.jpg" /></li>
<li><img src="../demo3.jpg" /></li>
<li><img src="../demo4.jpg" /></li>
<li><img src="../demo5.jpg" /></li>
<li><img src="../demo6.jpg" /></li>
<li><img src="../demo7.jpg" /></li>
<li><img src="../demo8.jpg" /></li>
</ul>
</div>
<div class="right"></div>
</div>
</body>
</html>

原文地址:http://www.corange.cn/archives/2011/09/3785.html