时间真快，不知不觉12月已经过了一半了，新的一年即将到来。有段时间没写东西了，技术这东东天天都在更新，天天都是一个新面孔，如果不坚持学习肯定就会落在队尾。要想跟上队伍，需要每天都要学习，但是学习的只是真是太多了，真叫人眼花缭乱，所以要给自己制定目标，强攻一个放心，要加入到专家领域。
在工作不忙的空闲时间，自己学习了jQuery在asp.net中的使用。看似简单，但在真正运用中却遇到不少麻烦，需要过硬的基础知识，同时还需要借助网络上的高手。各种各样的插件也出来了，足以满足目前的应用，不但可以节省大量的时间，还简单易用省去好多麻烦。
经常看到好多公司主页上的产品会自动滚动，实现产品展示的效果。便想自己试试实现这样的效果，并且图片是动态从数据库中获取，自动水平从左到右或从右到左滚动，下面就是实现的部分代码：
ImageScroll.aspx页面：
代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImageScroll.aspx.cs" Inherits="ImageScroll" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title></title>
8 <script type="text/javascript" src="jquery/jquery-1.4.js"></script>
9 <script type="text/javascript" src="js/imageScroller.js"></script>
10 <style type="text/css">
11 #viewer {height:100px; 300px; clear:both; overflow:hidden; border:3px solid #e5e5e5;}
12 #viewerFrame {505px; clear:both; padding:0;}
13 #viewer img {90px; height:90px; margin:5px; display:inline; border:0;}
14 #viewer a {display:block; float:left; 100px; height:100px;}
15 </style>
16 </head>
17 <script type="text/javascript">
18 $(function() {
19 $("#viewer").imageScroller({
20 next: "right",//向右
21 prev: "left",//向左
22 frame: "viewerFrame",//父容器
23 100, //宽度
24 child: "a", //图片容器
25 auto: true
26 });
27 });
28 </script>
29 <body>
30 <form id="form1" runat="server">
31 <div id="viewer">
32 <div id="viewerFrame">
33 <asp:Repeater ID="Repeater1" runat="server">
34 <ItemTemplate>
35 <a href=""><img alt="" src='<%# Eval("p_url") %>' /></a>
36 </ItemTemplate>
37 </asp:Repeater>
38 </div>
39 </div>
40 <span id="right">next</span><br/><span id="left">prev</span>
41 </form>
42 </body>
43 </html>
44
ImageScroll.aspx.cs页面
代码
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.UI;
6 using System.Web.UI.WebControls;
7 using System.Data;
8
9 public partial class ImageScroll : System.Web.UI.Page
10 {
11 protected void Page_Load(object sender, EventArgs e)
12 {
13 bingImage();
14 }
15
16 public void bingImage()
17 {
18 string strSql = "select p_url from product";
19 DataSet ds = AccessDB.Dataset(strSql);
20 Repeater1.DataSource = ds;
21 Repeater1.DataBind();
22 }
23 }
imageScroller.js文件
代码
1 jQuery.fn.imageScroller = function(params){
2 var p = params || {
3 next:"buttonNext",
4 prev:"buttonPrev",
5 frame:"viewerFrame",
6 100,
7 child:"a",
8 auto:true
9 };
10 var _btnNext = $("#"+ p.next);
11 var _btnPrev = $("#"+ p.prev);
12 var _imgFrame = $("#"+ p.frame);
13 var _width = p.width;
14 var _child = p.child;
15 var _auto = p.auto;
16 var _itv;
17
18 var turnLeft = function(){
19 _btnPrev.unbind("click",turnLeft);
20 if(_auto) autoStop();
21 _imgFrame.animate( {marginLeft:-_width}, 'fast', '', function(){
22 _imgFrame.find(_child+":first").appendTo( _imgFrame );
23 _imgFrame.css("marginLeft",0);
24 _btnPrev.bind("click",turnLeft);
25 if(_auto) autoPlay();
26 });
27 };
28
29 var turnRight = function(){
30 _btnNext.unbind("click",turnRight);
31 if(_auto) autoStop();
32 _imgFrame.find(_child+":last").clone().show().prependTo( _imgFrame );
33 _imgFrame.css("marginLeft",-_width);
34 _imgFrame.animate( {marginLeft:0}, 'fast' ,'', function(){
35 _imgFrame.find(_child+":last").remove();
36 _btnNext.bind("click",turnRight);
37 if(_auto) autoPlay();
38 });
39 };
40
41 _btnNext.css("cursor","hand").click( turnRight );
42 _btnPrev.css("cursor","hand").click( turnLeft );
43
44 var autoPlay = function(){
45 _itv = window.setInterval(turnLeft, 3000);
46 };
47 var autoStop = function(){
48 window.clearInterval(_itv);
49 };
50 if(_auto) autoPlay();
51 };
52
效果图：
AccessDB是操作access数据库的类。
以上就可以简单的实现动态从数据库中获得图片实现水平滚动效果。如果大家还有其它简洁方便的办法，欢迎交流、学习。