ASP.NET 百度图片效果或者QQ相册效果怎么实现？

http://www.scriptlover.com/controls/main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Imgmove</title>
<style type="text/css">
#show{height:auto;width:700px; text-align:center; margin-bottom:15px;border:1px solid #FFFFFF;display: inline-table}
#show img{ text-align:center; }
#container{  height:auto; width:613px; text-align:center; display: inline-table}
#left{ height:97px; width:24px; float:left; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453754.p.gif); margin-top:5px; margin-right:10px;}
#middle{ height:109px;  width:545px; float:left; overflow:hidden;}
#thumblist{ width:1090px;}
#thumblist div { width:109px; height:109px; text-align:center; float:left}
.cc{width:109px; height:109px; text-align:center; float:left; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011452785.p.gif)}
#thumblist div span { width:95px; height:95px; margin:6px !important;margin:3px; margin-top:6px; border:1px solid #FFFFFF; background-color:#000000; vertical-align:middle; line-height:95px; display:block}
#thumblist div span img { width:100%; height:100%; display:block}
#right{height:97px; width:24px; float:left;  background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453926.p.gif);margin-top:5px; margin-left:10px}
</style>
</head>
<body style="background-color:#FFFFFF; text-align:center" ><div id="container">
    <div id='show'><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012812035.p.gif'></div>
    <div id="left"></div>
    <div id="middle">
        <div id="thumblist">
<div >
   <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811863.p.gif'></span>
</div>
<div >
   <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811894.p.gif'></span>
</div>
<div >
   <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012812035.p.gif'></span>
</div>
<div >
   <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811457.p.gif'></span>
</div>
<div >
   <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811769.p.gif'></span>
</div>
<div >
   <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811738.p.gif'></span>
</div>
<div >
   <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811613.p.gif'></span>
</div>
<div >
   <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811566.p.gif'></span>
</div>
<div >
   <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012811472.p.gif'></span>
</div>
<div >
   <span><img src ='http://album.hi.csdn.net/app_uploads/wtcsy/20090622/012812004.p.gif'></span>
</div>
</div>
    </div>
    <div id="right"></div>
</div>

<script type="text/javascript">
document.all&&document.execCommand("BackgroundImageCache", false, true); var isIE = (document.all) ? true : false;var $ = function (id) {
return  document.getElementById(id);
};var Extend = function(destination, source) {
for (var property in source) {
  destination[property] = source[property];
}
}var Bind = function(object, fun,args) {
return function() {
  return fun.apply(object,args||[]);
}
}var BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event) {
  return fun.apply(object, [event || window.event].concat(args));
}
}var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}var Tween = {
    Quart: {
            easeOut: function(t,b,c,d){
                return -c * ((t=t/d-1)*t*t*t - 1) + b;
            }
        }
} function create(elm,parent,fn){var element = document.createElement(elm);fn&&fn(element); parent&&parent.appendChild(element);return element};
function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)}; var Class = function(properties){
       var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
       _class.prototype = properties;
       return _class;
};var  Imgroll =new Class({
options:{
Isrun : false,   //判断是否正在滚动
Step    : 100,
Time    : 10,
t       : 0,
b       : 0,
c       : 0,
d       : 60,
Tween   : Tween.Quart.easeOut,
Oninit  : function(){},
Onstart : function(){},
Onstop  : function(){}
},
initialize:function(show,obj,c,total,i,options){
this._show  = show    //代表大图的那个div
this._obj   = obj;
this._c     = c;
this._total = total;
this.i      = i ;
this.o      = '';   //记录图片背景的
this.timer  = null;
this.Isrun  = this.options.isrun;
this.Step   = this.options.Step;
this.Time   = this.options.Time;
this.t      = this.options.t;
this.b      = this.options.b;
this.c      = this.options.c;
this.d      = this.options.d;
this.Tween  = this.options.Tween;
this.Oninit = this.options.Oninit;
this.Onstart= this.options.Onstart;
this.Onstop = this.options.Onstop;
Extend(this,options||{});
var self =this, i = 0,img = this._c.getElementsByTagName('div');
this.o = img[this.i-1];
this.o.className = "cc";
for(;i<img.length;i++)
{
img[i].num = i;
(function(i){
addListener(img[i],'click',Bind(self,self.Start,[img[i]]));
})(i);
}
},
Start:function(c){
if(this.Isrun)return;
this.Isrun = true;
var img = this._c.getElementsByTagName('div')
this.b     = this._obj.scrollLeft;
if(c)
{
/*if(c.num<this.i)
{
this.c =  -1*(this.b);
}
else if(c.num>img.length-1-this._total+this.i)
{
this.c =(img.length - this._total)*this.Step - this.b
}
else
{
this.c = (c.num-this.i+1)*this.Step-this.b;
}*/
this.c = c.num<this.i?(-1)*this.b:(c.num>img.length-1-this._total+this.i?(img.length - this._total)*this.Step - this.b:(c.num-this.i+1)*this.Step-this.b)

} this.Onstart(c);
this.Run();
},
Run:function(){
if(this.t<this.d)
{
this.RunTo(Math.round(this.Tween(++this.t,this.b,this.c,this.d)))
this.timer = setTimeout(Bind(this,this.Run),this.Time)
}
else
{
this.RunTo(this.b+this.c);
this.Stop();
}
},
RunTo:function(i){
this._obj.scrollLeft = i;
},
Pre:function(){
this.c = this.Step*(-1);
this.Start();
},
Next:function(){
this.c = this.Step;
this.Start();
},
Stop:function(){
clearTimeout(this.timer);
this.t = 0;this.Isrun=false;
this.Onstop()
}
})var ss = new Imgroll($('show'),$('middle'),$('thumblist'),5,3,{
        Step:109,   //着里的109是指中间每个包含div图片的宽度,也可以写成$('thumblist').getElementsByTagName('div')[0].offsetWidth;
Onstart:function(obj){
if(!obj)return;
ss._show.getElementsByTagName('img')[0].src = obj.getElementsByTagName('img')[0].src;
this.o.className=''
this.o=obj;
obj.className ='cc';
        },
Onstop:function(){
$('left').style.backgroundImage=this._obj.scrollLeft == 0?"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453754.p.gif)":"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453879.p.gif)";
$('right').style.backgroundImage=this._obj.scrollLeft == 545?"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453832.p.gif)":"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453926.p.gif)";
        }});
addListener($('right'),'mousedown',function(){ss.Next()});
addListener($('right'),'mouseover',function(){cbg1(1)});
addListener($('right'),'mouseout',function(){cbg1(0)});
addListener($('left'),'mousedown',function(){ss.Pre()});
addListener($('left'),'mouseover',function(){cbg(1)});
addListener($('left'),'mouseout',function(){cbg(0)});
function cbg(n){
    if(ss._obj.scrollLeft==0)return;
$('left').style.backgroundImage = n?"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453941.p.gif)":"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453879.p.gif)"
}
function cbg1(n){
    if(ss._obj.scrollLeft==545)return;
$('right').style.backgroundImage = n?"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453957.p.gif)":"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453926.p.gif)"
}function sss(num){
ss.i =num;
}
</script>
</body>
</html>

jquery
http://www.xueit.com/js/show-4573-1.aspx

我也直接贴吧<script language="javascript" defer>
var zhang=2
function next(){
if(zhang==7){
alert("这已经是最后一张了!")
zhang=6
}
document.getElementById("tu").src=zhang+".jpg"
text.innerHTML="当前是第"+zhang+"张图片"
zhang++
}
function up(){
if(zhang==2){
alert("这已经是第一张了!")
zhang=3
}
document.getElementById("tu").src=(zhang-2)+".jpg"
text.innerHTML="当前是第"+(zhang-2)+"张图片"
zhang--
}
</script><style type="text/css">
#divall {
position:relative;
}
#divleft {
border:1px red solid;
border-right:0px red solid;
background: url(bg.gif);
cursor:url("pre.ani");
position:absolute;
top:0px;
z-index:2007;
text-align:right;
padding:0px
}
#divright {
border:1px red solid;
border-left:0px red solid;
background: url(bg.gif);
cursor:url("next.ani");
top:0px;
position:absolute;
z-index:2007
text-align:center;
padding:0px
}
#tu{z-index:-2007}
</style><div id="text" >当前是第1张图片</div>
<div id="divall">
<img src="1.jpg" id="tu"><div id="divleft" title="上一张" onmouseover="show_div('divleft','left.gif')" onmouseout="hide_div('divleft')" onclick="up()">
</div><div id="divright" title="下一张" onmouseover="show_div('divright','right.gif')" onmouseout="hide_div('divright')" onclick="next()">
</div>
</div>
<script> //var w=document.getElementById("tu").width//500
var h=document.getElementById("tu").height//400
document.getElementById("tu").style.width=w
document.getElementById("tu").style.height=h//document.getElementById("divleft").style.visibility='hidden'
document.getElementById("divleft").style.width=w/2
document.getElementById("divleft").style.height=h
document.getElementById("divleft").style.left=0//document.getElementById("divright").style.visibility='hidden'
document.getElementById("divright").style.width=w/2
document.getElementById("divright").style.height=h
document.getElementById("divright").style.left=w/2//document.write("<style> #tu{width:"+w+"px; height:"+h+"px;z-index:2000}</style>")function show_div(id,img){
document.getElementById(id).innerHTML="<img src="+img+">"
}
function hide_div(id){
document.getElementById(id).innerHTML=""
}
</script>

HTML code<scriptlanguage="javascript" defer>var zhang=2function next(){if(zhang==7){
alert("这已经是最后一张了!")
zhang=6
}
document.getElementById("tu").src=zhang+".jpg"
text.innerHTML="当前是第"+zhang+"张图片"
zhang++
}function up(){if(zhang==2){
alert("这已经是第一张了!")
zhang=3
}
document.getElementById("tu").src=(zhang-2)+".jpg"
text.innerHTML="当前是第"+(zhang-2)+"张图片"
zhang--
}</script><styletype="text/css">
#divall{
    position:relative;}
#divleft{
    border:1px red solid;
    border-right:0px red solid;
    background: url(bg.gif);
    cursor:url("pre.ani");
    position:absolute;
    top:0px;
    z-index:2007;
    text-align:right;
    padding:0px}
#divright{
    border:1px red solid;
    border-left:0px red solid;
    background: url(bg.gif);
    cursor:url("next.ani");
    top:0px;
    position:absolute;
    z-index:2007
    text-align:center;
    padding:0px}
#tu{z-index:-2007}</style><divid="text">当前是第1张图片</div><divid="divall"><imgsrc="1.jpg" id="tu"><divid="divleft" title="上一张" onmouseover="show_div('divleft','left.gif')" onmouseout="hide_div('divleft')" onclick="up()"></div><divid="divright" title="下一张"  onmouseover="show_div('divright','right.gif')" onmouseout="hide_div('divright')" onclick="next()"></div></div><script>//var w=document.getElementById("tu").width//500var h=document.getElementById("tu").height//400document.getElementById("tu").style.width=w
document.getElementById("tu").style.height=h//document.getElementById("divleft").style.visibility='hidden'document.getElementById("divleft").style.width=w/2document.getElementById("divleft").style.height=h
document.getElementById("divleft").style.left=0//document.getElementById("divright").style.visibility='hidden'document.getElementById("divright").style.width=w/2document.getElementById("divright").style.height=h
document.getElementById("divright").style.left=w/2//document.write("<style> #tu{width:"+w+"px; height:"+h+"px;z-index:2000}</style>")function show_div(id,img){
document.getElementById(id).innerHTML="<img src="+img+">"
}function hide_div(id){
document.getElementById(id).innerHTML=""
}</script>

[email protected]
希望高手把完整代码发给我谢谢了！

我也要一份，[email protected]
先谢过各位大了

我也要，谢谢！[email protected]

[email protected] 谢谢高手！

[email protected] 谢了大虾呵呵

[email protected] 发我一份不胜感激！！谢谢

求一份相册代码。。完整能运行的！！！油箱:[email protected]

大哥我也在学这个给我也来一份好吗？谢谢了
[email protected]

调试易

ASP.NET 百度图片效果或者QQ相册效果怎么实现？

解决方案 »