两者样式一样。向左、向右滚动时要用float：left让li元素在一行并排显示，而没有用display：inline-block是因为图片这样显示会有空隙，是因为行内元素产生的间隔，故用浮动。这里必须要设置ul#img的宽度为图片的总宽度。
*{ padding: 0; margin: 0; } nav { width: 720px; height: 405px; /*设置可见部分的高度*/ margin: 40px auto; border: 5px solid #eee; overflow: hidden; } #img{ width: 4320px; height:405px;/*设置可见部分的高度*/ position: relative;/*默认是static*/ } #img li{ width: 720px; height:405px; float:left; }
JavaScript部分
这里以向上滚动为例，JavaScript代码很简单，往下的滚动就是改变一下scrollTop就行，而左右方向就是将scrollTop变成scrollLeft，offsetTop换成offsetLeft就行。
var nav=document.getElementsByTagName('nav')[0]; var list=document.getElementById('img').getElementsByTagName('li'); function scroll() { if(nav.scrollTop==list[list.length-1].offsetTop){ nav.scrollTop=0; }else{ nav.scrollTop++; } } var timer= setInterval(scroll,10); nav.onmouseover=function(){ clearInterval(timer); }; nav.onmouseout=function () { timer=setInterval(scroll,10);//必须得对timer重新赋值 }