用jquery通过简单的几行代码可以实现文章图片数字顺序列表，可以用于一些文章排行等。

演示地址：http://wlog.com.cn/code/jquery/numlist/num-list.html

numlist

< !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>jQuery简单实现图数字顺序图片列表</title>
<script src="http://wlog.com.cn/lib/jquery/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
	$("#numList").find("li").each(function(i){
		$(this).addClass("num"+(i+1));
               //css 中样式从.num1 开始，所以用i+1
	});
})
-->
</script>
<style type="text/css">
ul,li {margin:0px; padding:0px;}
li {line-height:25px;}
.num1,.num2,.num3,.num4,.num5,.num6,.num7,.num8,.num9 {
text-indent:24px;
background:url(http://wlog.com.cn/code/jquery/numlist/images/num.gif) no-repeat;
border-bottom:1px #C3C3C3 solid;
overflow:hidden;
}
.num1 {background-position:0px -3px; }
.num2 {background-position:-2px -40px;}
.num3 {background-position:-4px -75px;}
.num4 {background-position:-6px -110px;}
.num5 {background-position:-6px -145px;}
.num6 {background-position:-6px -180px;}
.num7 {background-position:-6px -215px;}
.num8 {background-position:-6px -250px;}
.num9 {background-position:-6px -285px;}
</style>
</head>
<body>
<ul id="numList">
    <li>韩国新秀金新雅资料</li>
    <li>我的11款春夏发型真人秀</li>
    <li>祛斑收毛孔 7个经济小偏方</li>
    <li>林志玲四款盐美容秘</li>
    <li>诀 范冰冰章子怡示范上妆9禁</li>
    <li>忌 平民美女 4种超省钱养颜</li>
    <li>法 中国式妖娆 吕燕经典照 </li>
</ul>
</body>
</html>