JQuery，JS图片操作（上一张，下一张，旋转，放大，缩小）

1、html代码：我是从数据库获取图片路径。

  <div id="divprint" align="center">
            @{DataTable dt = (DataTable)ViewBag.filedetail;}
            @{
                DataRow dr2 = dt.Rows[];
                <input type="hidden" name="srcId" id="srcId" value="@dr2["ImgId"]" />
                <img src="/upload/contract/@dr2["fileSrc"]" id="imgsrc" style="margin:0 auto;width:95%;height:95%">
            }

        </div>
        <div style="position:fixed;bottom:0;margin-left:180px">

            <a id="before" class="easyui-linkbutton" style="width:80px">上一张</a>
            <a id="next" class="easyui-linkbutton" style="width:80px">下一张</a>
            <a id="big" class="easyui-linkbutton" style="width:80px" onclick="ImageSuofang(true)">放大</a>
            <a id="small" class="easyui-linkbutton" style="width:80px" onclick="ImageSuofang(false)"> 缩小</a>
            <a id="rotate" class="easyui-linkbutton" style="width:80px">旋转</a>
        </div>

2、jquery，js代码（这里是每次点击旋转90度。放大缩小是因为没有做图片会随着窗口变化而变化）

     <script type="text/javascript">
         $(document).ready(function () {
                          var arraySrc = new Array;
             var index = ;
             @foreach (DataRow dr in ViewBag.filedetail.Rows)
             {
             <text>
             arraySrc[index] = "@dr["ImgId"],@dr["fileSrc"]";
             index++;
             </text>
             }

             //上一张
             $("#before").click(function () {
                 var srcId = $("#srcId").val();
                 for (var i = ; i < arraySrc.length; i++) {
                     var src = "";
                     var no = ;
                     if (arraySrc[i].split(',')[] == srcId) {
                         if (i >= ) {
                             src = "/upload/contract/" + arraySrc[i - ].split(',')[];
                             no = i - ;
                         } else {
                             src = "/upload/contract/" + arraySrc[i].split(',')[];
                             no = i;
                         }
                         $("#imgsrc").attr('src', src);
                         $("#srcId").val(no);
                     }
                 }
             })
             //下一张
             $("#next").click(function () {
                 var srcId = $("#srcId").val();
                 for (var i = ; i < arraySrc.length; i++) {
                     var src = "";
                     var no = ;
                     if (arraySrc[i].split(',')[] == srcId) {
                         if (i <= arraySrc.length - ) {
                             src = "/upload/contract/" + arraySrc[i + ].split(',')[];
                             no = i + ;
                         } else {
                             src = "/upload/contract/" + arraySrc[i].split(',')[]
                             no = i;
                         }
                         $("#imgsrc").attr('src', src);
                         $("#srcId").val(no);
                     }
                 }
             })
             //旋转
             var num = ;
             $("#rotate").click(function () {
                 num++;
                 $("#imgsrc").rotate(num * );
             })

         });
         //放大缩小
         function ImageSuofang(args) {
             var imgsrc = document.getElementById("imgsrc");
             if (args) {
                 imgsrc.width = imgsrc.width * 1.1;
                 imgsrc.height = imgsrc.height * 1.1;
             }
             else {
                 imgsrc.width = imgsrc.width / 1.1;
                 imgsrc.height = imgsrc.height / 1.1;
             }
         }

       </script>

3、Controller代码：js里 filedetail 的数据来源

  public ActionResult DeviceEnclosureImgSeeForm()
         {
             FADeviceEnclosureModel DeviceEnclosureModel = new FADeviceEnclosureModel();
             FADeviceEnclosure detail = DeviceEnclosureModel.Detail(int.Parse(Request["DeviceEnclosureId"]));
             if (detail == null)
                 return Content("<script >alert('找不到信息！');window.parent.location.reload();</script >", "text/html");

             DataTable dt = new DataTable();
             dt.Columns.Add("ImgId");
             dt.Columns.Add("fileSrc");
             string[] DeviceEnclosureFileList = detail.DeviceEnclosureFile.Split(';');

             for (int i = ; i < DeviceEnclosureFileList.Length; i++)
             {
                 DataRow dr = dt.NewRow();
                 dr["ImgId"] = i;
                 dr["fileSrc"] = DeviceEnclosureFileList[i].ToString();
                 dt.Rows.Add(dr);
             }

             ViewData["filedetail"] = dt;

             return View();
         }