aps.net--自动图片移动模块（ JQuery animate）

.aspx代码如下：

<%@ Page Title="" Language="C#" MasterPageFile="~/SAMPLE_CODE/AMST_SAMPLE.master" AutoEventWireup="true" CodeFile="S2_JAnimate_ImgMove.aspx.cs" Inherits="SAMPLE_CODE_S2_JAnimate_ImgMove" %>


 <asp:Content ID="Content1" ContentPlaceHolderID="CPH_HEAD" Runat="Server">
     <script src="../Jscript/jquery-1.8.3.js" type="text/javascript"></script>


     <script type ="text/javascript">
         //也可以设定一个定时器,定时移动图片
         var t;


         $(document).ready(function () {
             //页面载入,启动计时器
             t = setInterval("$('#btn_r').click()", 3000);




             //鼠标移入层,出现切换的按钮
             $("#div_holder").mouseenter(function () {
                 $("#div_btns").fadeIn();
                 clearInterval(t);
             });


             $("#div_holder").mouseleave(function () {
                 $("#div_btns").fadeOut();
                 t = setInterval("$('#btn_r').click()", 3000);
             });


             //计算都是基于大图尺寸而定的.
             //点击按钮,移动内层
             $("#btn_l").click(function () {
                 img_now = (img_now + img_count - 1) % img_count;//img_count由后台代码计算得出, img_now数值是0-img_count-1。
                 doAnimate(img_now);
             });


             $("#btn_r").click(function () {
                 img_now = (img_now + 1) % img_count;
                 doAnimate(img_now);
             });


         });


         //参数表示移动到第几章图片(0-6)
         function doAnimate(_now) {
             var lpx = -(_now * img_width) + "px";
             $("#pnl_imgs").animate({ "opacity": 0.4 }, 400).animate({ "left": lpx }, 500).animate({ "opacity": 1 }, 400);
         }
     </script>

 <%--    
     根据图片高度和宽度的不同,计算和设定模块的CSS,
     也可以通过JS代码 或 LESS(CSS的扩展,在CSS代码中引入JS进行计算)来设定相应控件的高度
 --%>
     <style type ="text/css">
         #div_holder {width:640px; height:360px;  margin:0px auto; overflow:hidden; border:1px solid silver; }
         #div_imgOuter {  height:360px; /*高度必须设定,撑大外框层,确保左右按钮位置不变*/
                     background-image:url(../imgs/loading.gif); background-position:center; background-repeat:no-repeat;
                     background-size:100% 100%; 
                     position:relative;  }
         #div_btns { width:630px; margin:0px auto; display:none;
                     position:relative;
                     height:30px;
                     top:-195px;  /*计算而得到的值 360/2+30/2  */  }
         #pnl_imgs { position:relative;}
         #btn_l,#btn_r
             { width:30px; height:30px; border:1px solid #777777;
               border-radius:4px;
               cursor:pointer;  
               background-image:url(../imgs/back_btn_1.jpg);
               opacity:0.6;  }
         #btn_l:hover, #btn_r:hover
         { opacity:0.9;}
          #btn_r { background-position:-30px 0px;}
     </style>


 </asp:Content>
 <asp:Content ID="Content2" ContentPlaceHolderID="CPH_MEMO" Runat="Server">
     <h3>实现图片的切换,有2种方法</h3>
     <ul>
         <li>页面载入时,所有图片都载入到页面中,通过位移动画来切换</li>
         <li>通过更改大图的SRC地址,AJAX载入来切换</li>
         <li>重点关注模块内元素的布局</li>
     </ul>
 </asp:Content>


 <asp:Content ID="Content3" ContentPlaceHolderID="CPH_MAIN" Runat="Server">
     
     <div id="div_holder"><%--整个模块的外框--%>


         <div id="div_imgOuter" runat="server" clientidmode="Static"><%--装载大图的外框,其内层移动--%>
             <asp:Panel ID="pnl_imgs" runat="server" ClientIDMode="Static"> <%--装载大图内层--%>  </asp:Panel>
         </div>


         <div id="div_btns"><%--切换按钮的层--%>
             <b id="btn_l" class="fl"></b>            <b id="btn_r" class="fr"></b>
         </div>


     </div>
     


     <div class ="clr"></div>


 </asp:Content>

.aspx.cs代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.OleDb;

public partial class SAMPLE_CODE_S2_JAnimate_ImgMove : System.Web.UI.Page
{
    string str_cnn = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=";
    string str_sourcefile = "~/App_Data/DATA.mdb";
    OleDbConnection cnn;
    OleDbCommand cmd;
    OleDbDataReader datar;
    string str_sql;

    public int img_width = 640;     //这里设定图片的指定宽度;其他数值,均由此宽度决定

    protected void Page_Load(object sender, EventArgs e)
    {
        //loadimgs,页面载入,装载图片到层内
        loadimgs();
    }


    protected void loadimgs() {
        string str_conn = str_cnn + MapPath(str_sourcefile);
        cnn = new OleDbConnection(str_conn);
        cnn.Open();

        str_sql = "select * from t_imgs";

        cmd = new OleDbCommand(str_sql, cnn);
        datar = cmd.ExecuteReader();

        Image _img;
        int imgcount = 0;
        while (datar.Read())
        {
            _img = new Image();
            _img.ImageUrl=datar["img_url"].ToString();
            pnl_imgs.Controls.Add(_img);
            imgcount++;
        }

        //对于固定大小的大图,计算出内层的大小
        pnl_imgs.Style.Add("width", img_width * imgcount + "px");
        //txt_imgs.Text = imgcount.ToString();
        //txt_imgwidth.Text = img_width.ToString();

        string js = "var img_count="+imgcount.ToString() + ";"  +
              "var img_width =" + img_width.ToString() + ";" +
              "var img_now = 0;";


        ScriptManager.RegisterStartupScript(this, this.GetType(), "", js, true);
        

        cnn.Close();
    }
}

效果图如下：