图片_滚动展示
Code1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5
<title>kimipolo</title>6
<style type="text/css">7
#whole
{margin:1em}8
a{9
text-decoration:none;10
}11
*{12
margin:0px;13
padding:0px;14
}15
div#whole{16
width:102px;17
background:#eeeeee;18
position:absolute;19
left:50%;20
margin-left:-100px;21
}22
div#box{23
float:left;24
width:70px;25
overflow:hidden;26
}27
div#bigBox{28
width:9999px;29
}30
.mobile{31
32
display:block;33
float:left;34
width:70px;35
text-align:center;36
}37
.direction{38
float:left;39
display:block;40
height:1px;41
width:13px;42
padding-top:30px;43
cursor:pointer;44
45
}46
#r{47
text-align:right;48
}49
</style>50
</head>51
<body>52
53
<div id="whole">54
<span class="direction" id="l">←</span>55
<div id="box">56
<div id="bigBox">57
<span class="mobile"><img src="http://img1.cache.netease.com//photo/0011/2009-05-29/t_5AFRUPJR026J0011.jpg"></span>58
<span class="mobile"><img src="http://img1.cache.netease.com//photo/0011/2009-05-28/t_5AEE1DN5026B0011.jpg"></span>59
<span class="mobile"><img src="http://img1.cache.netease.com//photo/0011/2009-05-28/t_5AEC67KD026I0011.jpg"></span>60
<span class="mobile"><img src="http://img1.cache.netease.com//photo/0011/2009-05-29/t_5AFRKLKM026J0011.jpg"></span>61
<span class="mobile"><img src="http://img1.cache.netease.com//photo/0011/2009-05-28/t_5AEDJ4PP026K0011.jpg"></span>62
</div>63
</div>64
<span class="direction" id="r">→</span>65
</div>66
<script type="text/javascript">67
function $(e){68
return typeof e == 'string'?document.getElementById(e):e;69
}70
var Event={71
add:function (obj,EventType,fn){72
if (obj.attachEvent){73
obj['e'+EventType+fn] = fn;74
obj[EventType+fn] = function() {obj['e'+EventType+fn](window.event);}75
obj.attachEvent('on'+EventType,obj[EventType+fn]);76
}else if(obj.addEventListener){77
obj.addEventListener(EventType,fn,false); 78
}else {79
obj['on'+EventType]=fn;80
}81
}82
,83
remove:function(obj,EventType,fn){84
if (obj.detachEvent){85
obj.detachEvent('on'+EventType,obj[EventType+fn]);86
}else if(obj.removeEventListener){87
obj.removeEventListener(EventType,fn,false);88
}else {89
obj['on'+EventType]=null;90
}91
92
}93
}94
var Bind = function(object, fun) {95
return function() {96
return fun.apply(object, arguments);97
}98
}99
function Scr(scrE,bt,l,num){100
this.scrE=scrE;101
this.l=bt[0];102
this.r=bt[1];103
this.scrL=l;104
this.num=num;105
this.tempL=0;106
Event.add(this.r,'click',(function (o){return function (){o.goLeft()}})(this));107
Event.add(this.l,'click',(function (o){return function (){o.goRight()}})(this));108
}109
Scr.prototype={110
goLeft:function (){111
if(this.scrE.scrollLeft==this.scrL*(this.num-1)){112
this.tempL=0;113
return;114
}115
if(this.tempL==this.scrL){116
this.tempL=0;117
return;118
}119
this.tempL+=5;120
this.scrE.scrollLeft+=5;121
setTimeout(Bind(this,function (){this.goLeft()}),10);122
},123
goRight:function (){124
if(this.tempL==this.scrL){125
this.tempL=0;126
return;127
}128
this.tempL+=5;129
this.scrE.scrollLeft-=5;130
setTimeout(Bind(this,function (){this.goRight()}),10);131
}132
}133
test=new Scr($('box'),[$('l'),$('r')],70,5);134
</script>135
</body>136
</html>
浙公网安备 33010602011771号