下面的使用Jquery实现，使用的时候请引用Jquery.js，向上滚动看看js那里提示修改left为up即可。
<style type="text/css">.scrollleft{width:491px float:left padding-top:15px}
.scrollleft li{float:leftdisplay:inlinewidth:195pxtext-align:center}
</style> <script> $.fn.imgscroll = function(o){
var defaults = {
speed: 40,
amount: 0,
width: 1,
dir: "left"
}
o = $.extend(defaults, o)
return this.each(function(){
var _li = $("li", this)
_li.parent().parent().css({overflow: "hidden", position: "relative"}) //div
_li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}) //ul
_li.css({position: "relative", overflow: "hidden"}) //li
if(o.dir == "left") _li.css({float: "left"})
//初始大小
var _li_size = 0
for(var i=0 i<_li.size() i++)
_li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true)
//循环所需要的元素
if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"})
_li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone())
_li = $("li", this)
//滚动
var _li_scroll = 0
function goto(){
_li_scroll += o.width
if(_li_scroll > _li_size)
{
_li_scroll = 0
_li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll })
_li_scroll += o.width
}
_li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount)
}
//开始
var move = setInterval(function(){ goto() }, o.speed)
_li.parent().hover(function(){
clearInterval(move)
},function(){
clearInterval(move)
move = setInterval(function(){ goto() }, o.speed)
})
})
}
$(document).ready(function(){
$(".scrollleft").imgscroll({
speed: 40, //图片滚动速度
amount: 0, //图片滚动过渡时间
width: 1, //图片滚动步数
dir: "left" // "left" 或 "up" 向左或向上滚动
})
}) </script> <div class="scrollleft">
<ul>
<li>
<a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
</li>
<li>
<a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
</li>
<li>
<a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
</li>
<li>
<a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
</li>
<li>
<a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
</li>
<li>
<a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
</li>
<li>
<a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
</li>
<li>
<a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
</li>
</ul>
</div>
<script type="text/javascript">$(document).ready(function() {
var Top = -400 //定义一个向上移动的距离，这个数值和你图片或DIV的高度相等
var Time = 500 //定义一个速度
function move() {
if ($("#box").is(":animated")) return
$("#box").animate({
"margin-top": Top
}, Time) //animate方法，只能对数值型的值进行渐变
Top += -400 //运行一次增加一个图片的高度
if (Top == -800) //判断当总高度大于你DIV或者图片总高度
{
Top = 0 //把距离设置回0
Time = 500 //加快移动速度
} else {
Time = 500 //否则减慢速度
}
}
setInterval(move, 6000) //3秒执行一次move()
})
</script>
