jQuery在asp.net中实现图片自动滚动

　　时间真快，不知不觉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; width:300px; clear:both; overflow:hidden; border:3px solid #e5e5e5;}
12         #viewerFrame {width:505px; clear:both; padding:0;}
13         #viewer img {width:90px; height:90px; margin:5px; display:inline; border:0;}
14         #viewer a {display:block; float:left; width: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             width: 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         width: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数据库的类。

以上就可以简单的实现动态从数据库中获得图片实现水平滚动效果。如果大家还有其它简洁方便的办法，欢迎交流、学习。

posted on 2010-12-15 21:09 ZEKELOVE 阅读(1667) 评论(1) 编辑收藏举报