您的位置：首页 > Web前端 > JQuery

Asp.net图片滚动（Jquery实现）

2011-10-10 16:07 756 查看 
前台代码：
<%@ 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();
};



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航