熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> .NET編程 >> 正文

jQuery在asp.net中實現圖片自動滾動

2013-11-13 09:42:58  來源: .NET編程 

  時間真快不知不覺月已經過了一半了新的一年即將到來有段時間沒寫東西了技術這東東天天都在更新天天都是一個新面孔如果不堅持學習肯定就會落在隊尾要想跟上隊伍需要每天都要學習但是學習的只是真是太多了真叫人眼花缭亂所以要給自己制定目標強攻一個放心要加入到專家領域

  在工作不忙的空閒時間自己學習了jQuery在中的使用看似簡單但在真正運用中卻遇到不少麻煩需要過硬的基礎知識同時還需要借助網絡上的高手各種各樣的插件也出來了足以滿足目前的應用不但可以節省大量的時間還簡單易用省去好多麻煩

  經常看到好多公司主頁上的產品會自動滾動實現產品展示的效果便想自己試試實現這樣的效果並且圖片是動態從數據庫中獲取自動水平從左到右或從右到左滾動下面就是實現的部分代碼

  ImageScrollaspx頁面

  代碼

   <%@ Page Language=C# AutoEventWireup=true CodeFile=ImageScrollaspxcs Inherits=ImageScroll %>

  

    <!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN transitionaldtd>

  

    <html xmlns=>

    <head runat=server>

       <title></title>

       <script type=text/javascript src=jquery/jqueryjs></script>

       <script type=text/javascript src=js/imageScrollerjs></script>

       <style type=text/css>

           #viewer {height:px; width:px; clear:both; overflow:hidden; border:px solid #eee;}

           #viewerFrame {width:px; clear:both; padding:;}

           #viewer img {width:px; height:px; margin:px; display:inline; border:;}

           #viewer a {display:block; float:left; width:px; height:px;}

       </style>

    </head>

   <script type=text/javascript>

       $(function() {

           $(#viewer)imageScroller({

               next: right//向右

               prev: left//向左

               frame: viewerFrame//父容器

               width: //寬度

               child: a //圖片容器

               auto: true

           });

       });

   </script>

   <body>

       <form id=form runat=server>

       <div id=viewer>

           <div id=viewerFrame>

               <asp:Repeater ID=Repeater runat=server>

                   <ItemTemplate>

                       <a ><img alt= src=<%# Eval(p_url) %> /></a>

                   </ItemTemplate>

               </asp:Repeater>

           </div>

       </div>

       <span id=right>next</span><br/><span id=left>prev</span>

       </form>

   </body>

   </html>

  

  ImageScrollaspxcs頁面

  代碼

   using System;

   using SystemCollectionsGeneric;

   using SystemLinq;

   using SystemWeb;

   using SystemWebUI;

   using SystemWebUIWebControls;

   using SystemData;

  

   public partial class ImageScroll : SystemWebUIPage

   {

       protected void Page_Load(object sender EventArgs e)

       {

           bingImage();

       }

  

       public void bingImage()

       {

           string strSql = select p_url from product;

           DataSet ds = AccessDBDataset(strSql);

           RepeaterDataSource = ds;

           RepeaterDataBind();

       }

   }

  imageScrollerjs文件

  代碼

   jQueryfnimageScroller = function(params){

       var p = params || {

           next:buttonNext

           prev:buttonPrev

           frame:viewerFrame

           width:

           child:a

           auto:true

       };

       var _btnNext = $(#+ pnext);

       var _btnPrev = $(#+ pprev);

       var _imgFrame = $(#+ pframe);

       var _width = pwidth;

       var _child = pchild;

       var _auto = pauto;

       var _itv;

  

       var turnLeft = function(){

           _btnPrevunbind(clickturnLeft);

           if(_auto) autoStop();

           _imgFrameanimate( {marginLeft:_width} fast function(){

               _imgFramefind(_child+:first)appendTo( _imgFrame );

               _imgFramecss(marginLeft);

               _btnPrevbind(clickturnLeft);

               if(_auto) autoPlay();

           });

       };

  

       var turnRight = function(){

           _btnNextunbind(clickturnRight);

           if(_auto) autoStop();

           _imgFramefind(_child+:last)clone()show()prependTo( _imgFrame );

           _imgFramecss(marginLeft_width);

           _imgFrameanimate( {marginLeft:} fast function(){

               _imgFramefind(_child+:last)remove();

               _btnNextbind(clickturnRight);

               if(_auto) autoPlay();

           });

       };

  

       _btnNextcss(cursorhand)click( turnRight );

       _btnPrevcss(cursorhand)click( turnLeft );

  

       var autoPlay = function(){

         _itv = windowsetInterval(turnLeft );

       };

       var autoStop = function(){

           windowclearInterval(_itv);

       };

       if(_auto)    autoPlay();

   };


From:http://tw.wingwit.com/Article/program/net/201311/11399.html
  • 上一篇文章:

  • 下一篇文章:
  • Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.