知识大全 jQuery在asp.net中实现图片自动滚动
Posted 时间
篇首语:山再高,往上攀,总能登顶;路再长,走下去,定能到达。本文由小常识网(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= >
<head runat= server >
<title></title>
<script type= text/javascript src= jquery/jquery js ></script>
<script type= text/javascript src= js/imageScroller js ></script>
<style type= text/css >
#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>
<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>
</>
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相关参考