Jquery本身自带解决方案，以下是我打的一个实例。
<!DOCTYPE> <html> <head> <style type="text/css"> ul,li{padding: 0px;} .scroll-box{position: absolute;width: 1280px;height: 400px;overflow: hidden;} ul{position: absolute;} li{width: 150px;height: 400px;float: left; background: black;margin: 5px;display: block;} li.hover{background-color:yellow;} </style> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <!--键盘响应参数--> <script type="text/javascript" src="keycodes.js"></script> <!--按键响应--> <script type="text/javascript" src="keyDo.js"></script> <script type="text/javascript"> var listpos; $(function(){ listpos = 0; init(); }) function KeyEnter(){ } function KeyLeft(){ var oldeve = $("li")[listpos]; listpos--; var neweve = $("li")[listpos]; if(typeof(neweve)!="undefined"){ addClass(oldeve,neweve); }else{ listpos++; return; } } function KeyUp(){ } function KeyDown(){ } function KeyRight(){ var oldeve = $("li")[listpos]; listpos++; var neweve = $("li")[listpos]; if(typeof(neweve)!="undefined"){ addClass(oldeve,neweve); }else{ listpos--; return; } } function addClass(oldeve,neweve){ var z ; if(typeof(oldeve)==‘undefined‘&&typeof(neweve)==‘undefined‘){ neweve = $("li:eq(0)"); } if(listpos==$(‘li‘).length-1){ z = -($(‘li‘).length - 3)*135 +"px"; }else if(listpos>1){ z = -(listpos - 1)*135 +"px"; }else{ z=0; } if($(oldeve).is(":animated")){ $(oldeve).stop(false,true).animate({width:"125px"},100); $("ul").stop(false,true).animate({left:z},100); }else{ $(oldeve).animate({width:"125px"},100); } $(oldeve).removeClass("hover"); $("ul").animate({left:z},300); $(neweve).animate({width:"900px"},300); $(neweve).addClass("hover"); } function init(){ addClass(); } </script> <title>横向滚动</title> </head> <body> <div class="scroll-box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
原文：http://www.cnblogs.com/bingdianAr/p/4895446.html