我在豆丁网上看了这种效果就把它COPY下来了，希望大家可以拿去参考。
<!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>图片左右移动/可自动向左移动/可控制左右移动（兼容iE FF）</title>
<style>
body{margin:0;padding:0;font-size:12px;line-height:162%;color:#333;font-family:tahoma,Arial,\5b8b\4f53;-webkit-text-size-adjust:none;}
div,form,img,ul,ol,li,dl,dt,dd,option,td,th{margin:0;padding:0;border:0;list-style:none outside none;}
em{font-style:normal}
h1,h2,h3,h4,h5,h6,p,span,blockquote,input,select,textarea{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;border:0}
h2 {font-size:12px;color:#434343;line-height:22px;text-align:left;}
a {text-decoration:none;color:#326FA8;}
a:hover{text-decoration:underline;color:#2284E2;}
.clear{zoom:1;clear:both}
.clear:after{display:block;content:"\0020";overflow:hidden;height:0;clear:both}
.readbox{height:258px;border:1px #dfdfdf solid;background:#f5f5f5;width:704px;margin:10px auto;overflow:hidden;}
.readbox h2{padding:8px 10px 16px;font-size:14px;}
.readbox li{float:left;width:119px;height:192px;padding:9px 20px 0 18px;text-align:center;background-position:-34px -94px;margin:0 23px;display:inline;overflow:hidden;word-wrap:break-word;background-color:#fff;}
.readbox li p{margin:8px 0 0}
.readbox li a{display:block}
.readbox .hot span{background:url(http://ww1.sinaimg.cn/bmiddle/78ca5dd9gw6dfdxmmacd2j.jpg) no-repeat 0 0;}
#hot_wrapper{width:609px;height:201px;position:relative;left:47px;}
#hot_wrapper .outer_container{height:100%;width:100%;overflow:hidden;position:relative;left:0}
#hot_wrapper ul{position:absolute;left:0;top: 0px;width:20000px;height:201px;}
#hot_wrapper span{display:block;width:31px;height:52px;font-size:0;overflow:hidden;text-indent:-999px;cursor:pointer}
#hot_wrapper .left{background-position:-62px center}
#hot_wrapper .noleft{background-position:0 center}
#hot_wrapper .right{background-position:-31px center}
#hot_wrapper .noright{background-position:-93px center}
#hot_wrapper .left,#hot_wrapper .noleft{position:absolute;top:75px;left:-31px}
#hot_wrapper .right,#hot_wrapper .noright{position:absolute;top:75px;right:-31px}
/* col-reco */
.col-reco{}
.col-reco li{float:left;}
.col-reco h3{background-position:-124px -41px;position:relative;padding:3px 0 6px 22px;}
.col-reco h3 ul{float:right;position:absolute;top:3px;right:3px;font-size:12px;font-weight:400;}
.col-reco h3 li{margin:0 0 0 20px;}
.colReco-sub{border:1px #c6c6c6 solid;border-top-width:4px;padding:5px 0;width:704px;margin:0 auto;}
.colRecoBox-sub li{ float:left;width:86px;height:141px;padding:0 10px 0 11px; text-align:cente;position:relative;}
.colRecoBox-sub li dt em{ position:absolute;bottom:0;right:0;_right:-1px;padding:0 4px 0 6px;height: 18px;line-height:18px;border:1px solid #ccc;background:#f7f7f7;color:#333;cursor:pointer;white-space:nowrap;font-size:12px;}
.colRecoBox-sub li a{ position:relative;display:inline-block;}
.colRecoBox-sub li a img{ display:block;border:1px solid #ccc;padding:2px;overflow:hidden}
.colRecoBox-sub li a:hover {text-decoration:none; }
.colRecoBox-sub li a:hover img{ border:2px solid #86abd1;padding:1px}
.colRecoBox-sub li dd{padding:6px 0 0;text-align:center;}
.colRecoBox-sub li dt{width: 86px;height:96px;line-height:1;text-align:center;overflow:hidden;display:table-cell;vertical-align:bottom;*display: block;*font-size:96px;}
.colReco-move{width:642px;height: 141px;position:relative;left:32px;padding:13px 0 6px;}
.colReco-move .colReco-box{width:100%;height: 100%; overflow:hidden;position:relative;left:0;}
.colRecoBox-sub{ position:absolute;left:0;top: 0px;width:20000px;}
.colReco-move span{ display:block;width:16px;height:19px;font-size:0;overflow:hidden;text-indent:-999px;cursor:pointer;background:url(http://ww1.sinaimg.cn/bmiddle/78ca5dd9gw6dfdxm3crpkj.jpg) no-repeat 0 center;}
.colReco-move .left{ background-position:-48px center}
.colReco-move .noleft{ background-position:0 center}
.colReco-move .right{ background-position:-32px center}
.colReco-move .noright{ background-position:-16px center}
.colReco-move .left,.colReco-move .noleft{ position:absolute;top:67px;left:-16px}
.colReco-move .right,.colReco-move .noright{ position:absolute;top:67px;right:-16px}
</style>
<script type="text/javascript">
function getStyle(o,n){
return o.currentStyle?o.currentStyle[n]:(document.defaultView.getComputedStyle(o,"").getPropertyValue(n))
}
/* 相册效果 f有值自动播放 f为空点击播放 */
function photoAlbumn(photoObj,f){
var moveNum = 1,
_void=_autoVoid=true,
d=document,
elem = d.getElementById(photoObj);
if (!elem) return false;
var elemObj = elem.getElementsByTagName("li"),
elemParent = elem.getElementsByTagName("ul")[0],
autoWidth = elem.offsetWidth,
liWidth = (-[1,])?elemObj[0].offsetWidth+parseInt(getStyle(elemObj[0],"margin-right"))+parseInt(getStyle(elemObj[0],"margin-left")):elemObj[0].offsetWidth+parseInt(getStyle(elemObj[0],"marginRight"))+parseInt(getStyle(elemObj[0],"marginLeft")),
btns = elem.getElementsByTagName("span"),
max=elemObj.length,
lisAuto=autoWidth/liWidth,
moveNum=moveNum*lisAuto;
elemParent.style.width = max*liWidth + "px";
var moveElement =function(final_x,final_y,interval){
var step = function () {
if (elemParent.movement) clearTimeout(elemParent.movement);
if (!elemParent.style.left) elemParent.style.left = "0px";
if (!elemParent.style.top) elemParent.style.top = "0px";
var xpos = parseInt(elemParent.style.left);
var ypos = parseInt(elemParent.style.top);
if (xpos == final_x && ypos == final_y) {
_void = true;
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elemParent.style.left = xpos + "px";
elemParent.style.top = ypos + "px";
elemParent.movement = setTimeout(function(){step()},interval);
}
elemParent.movement = setTimeout(function(){step()},interval);
} ;
var prepareSlideshow = function (){
var btnsClass = function(){
btns[0].className=(moveNum <= max && moveNum > lisAuto)?"left":"noleft";
btns[1].className=(moveNum >= max && moveNum >= lisAuto)?"noright":"right";
}
if(max<= lisAuto){
btnsClass();
}
if(f){
var moveAuto = setInterval(function(){moveAutoShow()},3000);
}
var stop = function(){clearInterval(moveAuto);};
var moveAutoShow = function (){
moveNum=moveNum+lisAuto;
if(moveNum > max){
if((moveNum - max) >= lisAuto ){
moveNum=max;
clearInterval(moveAuto);
return true;
}else{
moveNum=max;
stop();
}
}
btnsClass();
moveElement(-liWidth*(moveNum-lisAuto),0,30);
};
if(f){
elem.onmouseover = function(){
if(!_autoVoid){
return false;
}
stop();
}
elem.onmouseout = function(){
if(!_autoVoid){
return false;
}
moveAuto = setInterval(function(){moveAutoShow()},3000);
}
}
btns[0].onmousedown = function() {
if(!_void){
return false;
}
clearInterval(moveAuto);
moveNum=moveNum - lisAuto;
if(moveNum < 1){
moveNum=lisAuto;
return true;
}
btnsClass();
if( moveNum < lisAuto && moveNum> 0){
moveNum=lisAuto;
moveElement(0,0,30);
}else{
moveElement(-liWidth*(moveNum-lisAuto),0,30);
}
moveAuto;
_void = _autoVoid = false;
}
btns[1].onmousedown = function() {
if(!_void) {
return false;
}
clearInterval(moveAuto);
moveNum=moveNum + lisAuto;
if(moveNum > max){
if((moveNum-max) < lisAuto){
moveNum=max;
moveElement(-liWidth*(moveNum-lisAuto),0,30);
}else{
moveNum=max;
return true;
}
}
btnsClass();
moveElement(-liWidth*(moveNum-lisAuto),0,30);
moveAuto;
_void = _autoVoid = false;
}
};
prepareSlideshow();
}
</script>
</head>
<body>
<div id="allreadDiv1" class="readbox">
<h2>自动向左滚动...</h2>
<div class="hot" id="hot_wrapper"><span class="noleft" title="上一页">上一页</span> <span class="right" title="下一页">下一页</span>
<div class="outer_container">
<ul>
<li><a href="#" title="【精品资料】英语音标学习精品课件【收藏版】"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="【精品资料】英语音标学习精品.."></a><p><a href="#" title="【精品资料】英语音标学习精品课件【收藏版】">【精品资料】英语音标学习精品..</a></p></li>
<li><a href="#" title="流动资产管理+现金管理+账户管理"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="流动资产管理+现金管理+账户管理"></a><p><a href="#" title="流动资产管理+现金管理+账户管理">流动资产管理+现金管理+账户管理</a></p></li>
<li><a href="#" title="精华2010年教育硕士考试教育学实战试题"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="精华2010年教育硕士考试教育学.."></a><p><a href="#" title="精华2010年教育硕士考试教育学实战试题">精华2010年教育硕士考试教育学..</a></p></li>
<li><a href="#" title="了解市场营销学的基础知识"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="了解市场营销学的基础知识"></a><p><a href="#" title="了解市场营销学的基础知识">了解市场营销学的基础知识</a></p></li>
<li><a href="#" title="调查实战指南_调查策划手册"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="调查实战指南_调查策划手册"></a><p><a href="#" title="调查实战指南_调查策划手册">调查实战指南_调查策划手册</a></p></li>
<li><a href="#" title="以人为本的管理的方法与艺术"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="以人为本的管理的方法与艺术"></a><p><a href="#" title="以人为本的管理的方法与艺术">以人为本的管理的方法与艺术</a></p></li>
<li><a href="#" title="2011年SAC证券从业资格考试包过班讲义"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="2011年SAC证券从业资格考试包过.."></a><p><a href="#" title="2011年SAC证券从业资格考试包过班讲义">2011年SAC证券从业资格考试包过..</a></p></li>
<li><a href="#" title="牛津小学英语4B教案的讲解"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="牛津小学英语4B教案的讲解"></a><p><a href="#" title="牛津小学英语4B教案的讲解">牛津小学英语4B教案的讲解</a></p></li>
<li><a href="#" title="《人力资源管理系统》操作管理手册"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="《人力资源管理系统》操作管理手册"></a><p><a href="#" title="《人力资源管理系统》操作管理手册">《人力资源管理系统》操作管理手册</a></p></li>
<li><a href="#" title="论文写作技巧大全(基础篇)"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="论文写作技巧大全(基础篇)"></a><p><a href="#" title="论文写作技巧大全(基础篇)">论文写作技巧大全(基础篇)</a></p></li>
<li><a href="#" title="看2010年展望2011年投资理财趋势：基金定投、理财规划、理财风险及相关理财案例资料大全"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="看2010年展望2011年投资理财趋.."></a><p><a href="#" title="看2010年展望2011年投资理财趋势：基金定投、理财规划、理财风险及相关理财案例资料大全">看2010年展望2011年投资理财趋..</a></p></li>
<li><a href="#" title="美国摄影师镜头下的美丽中国"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="美国摄影师镜头下的美丽中国"></a><p><a href="#" title="美国摄影师镜头下的美丽中国">美国摄影师镜头下的美丽中国</a></p></li>
<li><a href="#" title="MRP ERP中 的原理与实施"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="MRP ERP中 的原理与实施"></a><p><a href="#" title="MRP ERP中 的原理与实施">MRP ERP中 的原理与实施</a></p></li>
<li><a href="#" title="制造业公司行政、财务、生产等业务流程大全"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="制造业公司行政、财务、生产等.."></a><p><a href="#" title="制造业公司行政、财务、生产等业务流程大全">制造业公司行政、财务、生产等..</a></p></li>
<li><a href="#" title="《监理工程师贯标培训》手册"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="《监理工程师贯标培训》手册"></a><p><a href="#" title="《监理工程师贯标培训》手册">《监理工程师贯标培训》手册</a></p></li>
</ul>
</div>
</div>
</div>
<div class="colReco-sub clear">
<div id="colRecomove2" class="colReco-move"> <span title="上一页" class="noleft">上一页</span><span title="下一页" class="right">下一页</span>
<div class="colReco-box">
<ul class="colRecoBox-sub">
<li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="融资租赁合同"><em class="t">15</em></a></dt><dd><a href="#" title="融资租赁合同">融资租赁合同</a></dd></dl></li>
<li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="运用租赁投资机制"><em class="t">8</em></a></dt><dd><a href="#" title="运用租赁投资机制">运用租赁投资机制</a></dd></dl></li>
<li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="租赁"><em class="t">96</em></a></dt><dd><a href="#" title="租赁">租赁</a></dd></dl></li>
<li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="某投资广场写字楼租赁及物业管理合同"><em class="t">17</em></a></dt><dd><a href="#" title="某投资广场写字楼租赁及物业管理合同">某投资广场写字楼租..</a></dd></dl></li>
<li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="股票学习股票操作知识---股票学习"><em class="t">545</em></a></dt><dd><a href="#" title="股票学习股票操作知识---股票学习">股票学习股票操作知..</a></dd></dl></li>
<li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="股票学习笔记"><em class="t">19</em></a></dt><dd><a href="#" title="股票学习笔记">股票学习笔记</a></dd></dl></li>
<li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="股票学习"><em class="t">10</em></a></dt><dd><a href="#" title="股票学习">股票学习</a></dd></dl></li>
<li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="股票学习"><em class="t">12</em></a></dt><dd><a href="#" title="股票学习">股票学习</a></dd></dl></li>
<li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="市场营销"><em class="t">578</em></a></dt><dd><a href="#" title="市场营销">市场营销</a></dd></dl></li>
<li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="市场营销教程"><em class="t">405</em></a></dt><dd><a href="#" title="市场营销教程">市场营销教程</a></dd></dl></li>
<li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="天津科技大学市场营销总复习"><em class="t">7</em></a></dt><dd><a href="#" title="天津科技大学市场营销总复习">天津科技大学市场营..</a></dd></dl></li>
<li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="市场营销学"><em class="t">352</em></a></dt><dd><a href="#" title="市场营销学">市场营销学</a></dd></dl></li>
<li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="城建投融资领域开展融资租赁"><em class="t">16</em></a></dt><dd><a href="#" title="城建投融资领域开展融资租赁">城建投融资领域开展..</a></dd></dl></li>
<li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="MBA实业投融资·第五章·融资渠道及方式"><em class="t">67</em></a></dt><dd><a href="#" title="MBA实业投融资·第五章·融资渠道及方式">MBA实业投融资·第五..</a></dd></dl></li>
<li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="融资租赁的营销策略"><em class="t">18</em></a></dt><dd><a href="#" title="融资租赁的营销策略">融资租赁的营销策略</a></dd></dl></li>
<li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="投资性房地产外币折算租赁"><em class="t">20</em></a></dt><dd><a href="#" title="投资性房地产外币折算租赁">投资性房地产外币折..</a></dd></dl></li>
<li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="股市技术指标分析"><em class="t">56</em></a></dt><dd><a href="#" title="股市技术指标分析">股市技术指标分析</a></dd></dl></li>
<li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="股票预测相关理论"><em class="t">25</em></a></dt><dd><a href="#" title="股票预测相关理论">股票预测相关理论</a></dd></dl></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
photoAlbumn("hot_wrapper",1);
photoAlbumn("colRecomove2");
</script>
</body>
</html>
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)