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