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