知识大全 jQuery在asp.net中实现图片自动滚动

Posted 2022-07-18 时间

篇首语：山再高，往上攀，总能登顶；路再长，走下去，定能到达。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 jQuery在asp.net中实现图片自动滚动相关的知识，希望对你有一定的参考价值。

jQuery在asp.net中实现图片自动滚动 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　时间真快不知不觉月已经过了一半了新的一年即将到来有段时间没写东西了技术这东东天天都在更新天天都是一个新面孔如果不坚持学习肯定就会落在队尾要想跟上队伍需要每天都要学习但是学习的只是真是太多了真叫人眼花缭乱所以要给自己制定目标强攻一个放心要加入到专家领域

　　在工作不忙的空闲时间自己学习了jQuery在中的使用看似简单但在真正运用中却遇到不少麻烦需要过硬的基础知识同时还需要借助网络上的高手各种各样的插件也出来了足以满足目前的应用不但可以节省大量的时间还简单易用省去好多麻烦

　　经常看到好多公司主页上的产品会自动滚动实现产品展示的效果便想自己试试实现这样的效果并且图片是动态从数据库中获取自动水平从左到右或从右到左滚动下面就是实现的部分代码

　　ImageScroll aspx页面

　　代码

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

　　 <!DOCTYPE PUBLIC //W C//DTD XHTML Transitional//EN transitional dtd >

　　 < xmlns= >

　　 #viewer height: px; width: px; clear:both; overflow:hidden; border: px solid #e e e ;

　　 #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>

　　 $(function()

　　 $( #viewer ) imageScroller(

　　 next: right //向右

　　 prev: left //向左

　　 frame: viewerFrame //父容器

　　 width: //宽度

　　 child: a //图片容器

　　 auto: true

　　 );

　　 </script>

　　 <body>

　　 <asp:Repeater ID= Repeater runat= server >

　　 </ItemTemplate>

　　 </asp:Repeater>

　　 </div>

　　 </form>

　　 </body>

　　 </>

　　ImageScroll aspx cs页面

　　代码

　　 using System;

　　 using System Collections Generic;

　　 using System Linq;

　　 using System Web;

　　 using System Web UI;

　　 using System Web UI WebControls;

　　 using System Data;

　　 public partial class ImageScroll : System Web UI Page

　　 protected void Page_Load(object sender EventArgs e)

　　 bingImage();

　　 public void bingImage()

　　 string strSql = select p_url from product ;

　　 DataSet ds = AccessDB Dataset(strSql);

　　 Repeater DataSource = ds;

　　 Repeater DataBind();

　　imageScroller js文件

　　代码

　　 jQuery fn imageScroller = function(params)

　　 var p = params ||

　　 next: buttonNext

　　 prev: buttonPrev

　　 frame: viewerFrame

　　 width:

　　 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 );

　　 _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: 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 );

　　 ;

　　 var autoStop = function()

　　 window clearInterval(_itv);

　　 ;

　　 if(_auto) autoPlay();

cha138/Article/program/net/201311/11399