jQuery如何在asp.net中实现图片自动滚动 -控件新闻-慧都网

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

转帖|其它|编辑：郝浩|2010-12-17 14:36:58.000|阅读 2192 次

概述：经常看到好多公司主页上的产品会自动滚动，实现产品展示的效果。便想自己试试实现这样的效果，并且图片是动态从数据库中获取，自动水平从左到右或从右到左滚动。本文将介绍jQuery如何在asp.net中实现图片自动滚动，希望对大家有帮助。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

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

ImageScroll.aspx页面：

　代码

　　1 <%@ Page Language="C#" AutoEventWireup="true"

CodeFile="ImageScroll.aspx.cs" Inherits="ImageScroll" %>

　　3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　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>

　　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;

　　9 public partial class ImageScroll : System.Web.UI.Page

　　10 {

　　11 protected void Page_Load(object sender, EventArgs e)

　　12 {

　　13 bingImage();

　　14 }

　　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;

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

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

　　41 _btnNext.css("cursor","hand").click( turnRight );

　　42 _btnPrev.css("cursor","hand").click( turnLeft );

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

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：网络转载

上一篇：JDOM如何用简单的Java程序来修改XML文件下一篇：Silverlight如何通过WCF访问MSSQL数据库存储过程

在线采购

中文文档库

试用/Demo下载

开发社群