效果图及代码如下：<!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;}h3,h5{text-align:center;}</style><link rel="stylesheet" href="css/main.css" type="text/css"/> <!-- 引入jQuery --> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script><script language="javascript" type="text/javascript"> $(function(){ var $content = $("#news-content"); var i = 6; //已知显示的li的个数 var m = 6; //用于计算的变量 var count = $content.find("li").length;//总共的li的个数 $("#topprev").click(function(){ if( !$content.is(":animated")){ //判断元素是否正处于动画，如果不处于动画状态，则追加动画。 if(m<count){ //判断 i 是否小于总的个数 m++; $content.animate({left: "-=99px"}, 600); } } }); $("#topnext").click(function(){ if( !$content.is(":animated")){ if(m>i){ //判断 i 是否小于总的个数 m--; $content.animate({left: "+=99px"}, 600); } } }); })</script></head><body> <h3>jQuery之Slide-Imagess-Show.</h3> <h5>Code By CssRain.cn</h5> <div id="converge-top" class="lists"> <div id="scroller" class="google-list"> <ul class="movable" id="news-content" style="left: 0px; margin-left: 0px; width: 990px;"> <li> <a title="cssrain" href="http://www.cssrain.cn"> <div class="imgcont"> <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/> </div> <span>CssRain1</span> </a> </li> <li> <a title="cssrain" href="http://www.cssrain.cn"> <div class="imgcont"> <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/> </div> <span>CssRain2</span> </a> </li> <li> <a title="cssrain" href="http://www.cssrain.cn"> <div class="imgcont"> <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/> </div> <span>CssRain3</span> </a> </li> <li> <a title="cssrain" href="http://www.cssrain.cn"> <div class="imgcont"> <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/> </div> <span>CssRain4</span> </a> </li> <li> <a title="cssrain" href="http://www.cssrain.cn"> <div class="imgcont"> <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/> </div> <span>CssRain5</span> </a> </li> <li> <a title="cssrain" href="http://www.cssrain.cn"> <div class="imgcont"> <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/> </div> <span>CssRain6</span> </a> </li> <li> <a title="cssrain" href="http://www.cssrain.cn"> <div class="imgcont"> <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/> </div> <span>CssRain7</span> </a> </li> <li> <a title="cssrain" href="http://www.cssrain.cn"> <div class="imgcont"> <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/> </div> <span>CssRain8</span> </a> </li> <li> <a title="cssrain" href="http://www.cssrain.cn"> <div class="imgcont"> <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/> </div> <span>CssRain9</span> </a> </li> <li> <a title="cssrain" href="http://www.cssrain.cn"> <div class="imgcont"> <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/> </div> <span>CssRain10</span> </a> </li> </ul> </div> <a class="button-left" id="topnext" href="#">next</a> <a rel="nofollow" class="button-right" id="topprev" href="#">prev</a> </div> <div style="width:600px;margin:10px auto;"> 我用了 10 个li 元素，每个宽度是 99px， 所以id="news-content" 的ul元素的 宽度是 990px。 另外动画是通过改变ul的margin-left属性来达到的，每次增加或者减少99px。 </div></body></html>
main.css:.lists { height:84px; margin:0 auto; padding:0 0 10px; position:relative; width:730px;}.google-list { display:inline; float:left; height:82px; margin:0 145px 0 53px; overflow:hidden; padding:0; position:relative; width:600px;}.google-list ul { margin:0; overflow:hidden; padding:14px 0 0; position:absolute;}.google-list li { float:left; font-family:"Trebuchet MS",Arial,Helvetica,sans-serif; font-size:10px; font-weight:bold; line-height:12px; list-style:none; padding:0 0 30px 17px; width:82px;}.google-list li a { color:#6C93C5; float:left; text-decoration:none;}.google-list li a:hover { text-decoration:underline;}.google-list li a .imgcont { height:43px; overflow:hidden;}.google-list li a .img { display:block; margin:0 auto; padding:0; height:41px; width:80px; border:1px solid #D9D9D9; cursor:pointer; background:#FFFFFF none repeat scroll 0 0;}.google-list li a span { display:block; padding:1px 0 0 1px; text-align:center;}a.button-left { background-image:url(c-google-arrows.gif); background-position:0 0; height:44px; left:24px; overflow:hidden; position:absolute; text-indent:-9999px; top:18px; width:28px;}a.button-right { background-image:url(c-google-arrows.gif); background-position:-28px 0; height:44px; overflow:hidden; position:absolute; right:40px; text-indent:-9999px; top:18px; width:28px;}
