前台代码：
<%@ Page Language="C#" AutoEventWireup="true" Debug="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>图片滚动</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript" src="imageScroller.js"></script>
<style type="text/css">
#viewer {height:100px; width:300px; clear:both;overflow:hidden; border:3px solid #e5e5e5;}
#viewerFrame {width:505px; clear:both; padding:0;}
#viewer img {width:90px; height:90px; margin:5px; display:inline; border:0;}
#viewer a {display:block; float:left; width:100px; height:100px;}
</style>
<script type="text/javascript">
$(function() {
$("#viewer").imageScroller({
//next: "right", //向右
//prev: "left", //向左
frame: "viewerFrame", //父容器
width: 100, //宽度
child: "a", //图片容器
auto: true
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="viewer">
<div id="viewerFrame">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<a href=""><img alt="" src='<%# Eval("src") %>' /></a>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
<span id="right">next</span><br/><span id="left">prev</span>
</form>
</body>
</html>
后台代码：
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
bingImage();
}
/// <summary>
/// 图片绑定
/// </summary>
public void bingImage()
{
ylDataContext dc = new ylDataContext();
var q = (from p in dc.PictureManage where p.isdelete == false orderby p.id descending select p).Take(20).ToList();
Repeater1.DataSource = q;
Repeater1.DataBind();
}
}
imageScroller.js
jQuery.fn.imageScroller = function(params) {
var p = params || {
next: "buttonNext",
prev: "buttonPrev",
frame: "viewerFrame",
width: 100,
child: "a",
auto:true
};
var _btnNext = $("#" + p.next);
var _btnPrev = $("#" + p.prev);
var _imgFrame = $("#" + p.frame);
var _width = p.width;
var _child = p.child;
var _auto = p.auto;
var _itv;
var turnLeft = function() {
_btnPrev.unbind("click", turnLeft);
if (_auto) autoStop();
_imgFrame.animate({
marginLeft: -_width
},
'fast', '',
function() {
_imgFrame.find(_child + ":first").appendTo(_imgFrame);
_imgFrame.css("marginLeft", 0);
_btnPrev.bind("click", turnLeft);
if (_auto) autoPlay();
});
};
var turnRight = function() {
_btnNext.unbind("click", turnRight);
if (_auto) autoStop();
_imgFrame.find(_child + ":last").clone().show().prependTo(_imgFrame);
_imgFrame.css("marginLeft", -_width);
_imgFrame.animate({
marginLeft: 0
},
'fast', '',
function() {
_imgFrame.find(_child + ":last").remove();
_btnNext.bind("click", turnRight);
if (_auto) autoPlay();
});
};
_btnNext.css("cursor", "hand").click(turnRight);
_btnPrev.css("cursor", "hand").click(turnLeft);
var autoPlay = function() {
_itv = window.setInterval(turnLeft, 3000);
};
var autoStop = function() {
window.clearInterval(_itv);
};
if (_auto) autoPlay();
};
