请教高手，把以下旋转图片的代码改成动态生成不定数量的的代码，

<!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=gb2312" />
<title>js图片查看器(可缩放、旋转、翻转)</title>
<script src="CJL.0.1.min.js"></script>
<script src="ImageTrans.js"></script>
</head>
<body>
<style>
#idContainer{border:1px solid #000;width:600px; height:500px; background:#FFF center no-repeat;}
</style>
js图片查看器(可缩放、旋转、翻转)<br>
<div id="idContainer"> </div>
<input id="idLeft" type="button" value="向左旋转" />
<input id="idRight" type="button" value="向右旋转" />
<input id="idVertical" type="button" value="垂直翻转" />
<input id="idHorizontal" type="button" value="水平翻转" />
<input id="idReset" type="button" value="重置" />
<br>
<input id="idSrc" type="text" value="2.jpg" />
<input id="idLoad" type="button" value="换图" />
<br>
ps：鼠标拖动图片旋转，鼠标滚动滚轮缩放。<br><br>
作者：<a href="http://www.cnblogs.com/cloudgamer/">cloudgamer</a>，<a href="http://www.cnblogs.com/cloudgamer/archive/2010/08/16/ImageTrans.html">程序说明</a>
<script>
(function(){

var container = $$("idContainer"), src = "1.jpg",
options = {
onPreLoad: function(){ container.style.backgroundImage = "url('loading.gif')"; },
onLoad: function(){ container.style.backgroundImage = ""; }
},
it = new ImageTrans( container, options );
it.load(src);
//垂直翻转
$$("idVertical").onclick = function(){ it.vertical(); }
//水平翻转
$$("idHorizontal").onclick = function(){ it.horizontal(); }
//左旋转
$$("idLeft").onclick = function(){ it.left(); }
//右旋转
$$("idRight").onclick = function(){ it.right(); }
//重置
$$("idReset").onclick = function(){ it.reset(); }
//换图
$$("idLoad").onclick = function(){ it.load( $$("idSrc").value ); }

})()
</script>
</body>
</html>图片数量和名称由服务器查询产生，不定的，每个图片对应一组上述的操作按钮，进行旋转变换操作

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

原作者程序源代码地址：
http://files.cnblogs.com/cloudgamer/ImageTrans.rar
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/CJL.0.1.min.js"></script>
    <script type="text/javascript" src="Scripts/ImageTrans.js"></script>
    <style type="text/css">
        .idContainer
        {
            border: 1px solid #000;
            width: 400px;
            height: 300px;
            background: #FFF center no-repeat;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Repeater ID="rp" runat="server">
        <HeaderTemplate>
            <table>
        </HeaderTemplate>
        <ItemTemplate>
            <%#(Container.ItemIndex + 1) % HorizontalCount == 1 ? "<tr>" : ""%>
            <td>
                <div id="idContainer<%#Container.ItemIndex%>" class='idContainer'>
                </div>
                <input id="idLeft<%#Container.ItemIndex%>" type="button" value="向左旋转" />
                <input id="idRight<%#Container.ItemIndex%>" type="button" value="向右旋转" />
                <input id="idVertical<%#Container.ItemIndex%>" type="button" value="垂直翻转" />
                <input id="idHorizontal<%#Container.ItemIndex%>" type="button" value="水平翻转" />
                <input id="idReset<%#Container.ItemIndex%>" type="button" value="重置" />
                <input id="idCanvas<%#Container.ItemIndex%>" type="button" value="使用Canvas" />
                <br />
                <input id="idSrc<%#Container.ItemIndex%>" type="text" value="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_xx2.jpg" />
                <input id="idLoad<%#Container.ItemIndex%>" type="button" value="换图" />
            </td>
            <%#(Container.ItemIndex + 1) % HorizontalCount == 0 ? "</tr>" : ""%>
        </ItemTemplate>
        <FooterTemplate>
            <%=EndHTML%>
            </table>
        </FooterTemplate>
    </asp:Repeater>
    <asp:Literal ID="litJS" runat="server"></asp:Literal>
    <asp:Button ID="btn" runat="server" />
    </form>
</body>
</html>
protected readonly int HorizontalCount = 3;
        protected string EndHTML = string.Empty;        private const string JS = @"(function(){0}
var containerArr =[], srcArr =[],optionsArr =[],itArr=[];
{1}
{2})()";        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                //模拟数据查询
                DataTable dt = new DataTable();
                dt.Columns.Add("name");
                DataRow dr;
                for (int i = 0; i < 10; i++)
                {
                    dr = dt.NewRow();
                    dr[0] = i;
                    dt.Rows.Add(dr);
                }
                ///////////////////////////////////////////                StringBuilder builder = new StringBuilder(256);
                //遍历数据源
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    builder.AppendFormat("containerArr.push($$('idContainer{0}'));", i.ToString());
                    builder.AppendLine();
                    builder.AppendLine("srcArr.push('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_mm14.jpg');");
                    builder.AppendFormat(@"optionsArr.push({0}
onPreLoad: function(){0} containerArr[{2}].style.backgroundImage = ""url('http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif')""; {1},
onLoad: function(){0} containerArr[{2}].style.backgroundImage = ''; {1},
onError: function(err){0} containerArr[{2}].style.backgroundImage = ''; alert(err); {1}
{1});", "{", "}", i.ToString());
                    builder.AppendLine();
                    builder.AppendFormat("itArr[{0}]=new ImageTrans(containerArr[{0}], optionsArr[{0}]);", i.ToString());
                    builder.AppendLine();
                    builder.AppendFormat("itArr[{0}].load(srcArr[{0}]);", i.ToString());
                    builder.AppendLine();
                    //垂直翻转
                    builder.AppendFormat("$$('idVertical{0}').onclick = function(){1} itArr[{0}].vertical(); {2}", i.ToString(), "{", "}");
                    builder.AppendLine();
                    //水平翻转
                    builder.AppendFormat("$$('idHorizontal{0}').onclick = function(){1} itArr[{0}].horizontal(); {2}", i.ToString(), "{", "}");
                    builder.AppendLine();
                    //左旋转
                    builder.AppendFormat("$$('idLeft{0}').onclick = function(){1} itArr[{0}].left(); {2}", i.ToString(), "{", "}");
                    builder.AppendLine();
                    //右旋转
                    builder.AppendFormat("$$('idRight{0}').onclick = function(){1} itArr[{0}].right(); {2}", i.ToString(), "{", "}");
                    builder.AppendLine();
                    //重置
                    builder.AppendFormat("$$('idReset{0}').onclick = function(){1} itArr[{0}].reset(); {2}", i.ToString(), "{", "}");
                    builder.AppendLine();
                    //换图
                    builder.AppendFormat("$$('idLoad{0}').onclick = function(){1} itArr[{0}].load($$('idSrc{0}').value); {2}", i.ToString(), "{", "}");
                    builder.AppendLine();
                }
                litJS.Text = "<script>" + string.Format(JS, "{", builder, "}") + "</script>";                int remainder = dt.Rows.Count % HorizontalCount;
                if (remainder != 0)
                {
                    EndHTML = new string('a', HorizontalCount - remainder);
                    EndHTML = EndHTML.Replace("a", "<td></td>") + "</tr>";
                }
                rp.DataSource = dt;
                rp.DataBind();
            }
        }