.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();
}
}
效果图如下：
