点击左右横向滚动，很简单的代码哦
<!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> <title>点击图片横向滚动</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px;} </style> <style> #scrollable { background-color:#efefef; border:1px solid #ddd; padding:10px 8px; width:523px; height:65px; margin-top:30px; } div.items { height:66px; margin-left:8px; float:left; width:475px !important; } div.items li { display:block; float:left; margin-right:8px; width:88px; height:66px; background:#BBB; font-size:50px; color:#ccc; line-height:66px; text-decoration:none; text-align:center; cursor:pointer; } div.items li:hover { color:#999; } div.items li.active { background-position:-174px 0; color:#555; cursor:default; } a.prev, a.next { background:url(http://www.shengyijie.net/images/left_02.png) no-repeat 0 0; display:block; width:23px; height:43px; float:left; margin:15px 0 0 0; cursor:pointer; } a.next { background-image:url(http://www.shengyijie.net/images/right_02.png) } </style> <!-- 引入jQuery --> <script src="http://jt.875.cn/js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ var $content = $(".scroll_demo"); var i = 5; //已知显示的<li>元素的个数 var m = 5; //用于计算的变量 var count = $content.find("li").length;//总共的<li>元素的个数 $(".next").click(function(){ if( !$content.is(":animated")){ //判断元素是否正处于动画，如果不处于动画状态，则追加动画。 if(m<count){ //判断 i 是否小于总的个数 m++; $content.animate({left: "-=96px"}, 600); } } }); $(".prev").click(function(){ if( !$content.is(":animated")){ if(m>i){ //判断 i 是否小于总的个数 m--; $content.animate({left: "+=96px"}, 600); } } }); }) </script> </head> <body> <div style="margin:0 auto;width:530px;"> <!-- 例子 --> <div id="scroll"> <a class="prev" href="#"></a> <!-- 外部div使用相对定位，里面的div使用绝对定位 --> <div class="items" style="overflow: hidden; position: relative; visibility: visible; width: 478px;"> <div style="position: absolute; width: 200000em; left: 0px;" class="scroll_demo"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> </div> <br clear="all"/> </div> <!-- "prev page" link --> <a class="next" href="#"></a> </div> </div> </body> </html>