Code:
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
position:relative;overflow:hidden;left:100px;width:800px;height:200px;border:solid black 1px;
}
.slide {
position:absolute;left:0px;top:0px;width:1300px;background-Color:#FFCC66;border:solid red 0px;
}
.slide .frame{
width:130px;height:100px;margin-Left:0px;float:left;
}
.slide .frame IMG{
width:120px;height:100px;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Pan Carousel(12-June-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk
function zxcPanCarousel(o){
this.mde=o.Mode.charAt(0).toUpperCase()=='V'?['top','height',1,'offsetTop','offsetHeight']:['left','width',0,'offsetLeft','offsetWidth'];
this.p=document.getElementById(o.ID);
var slide=this.p.getElementsByTagName('DIV')[0];
slide.style[this.mde[1]]='100000px';
for (var clds=slide.childNodes,fst,lst,z0=0;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
if (!fst){
fst=clds[z0];
}
lst=clds[z0];
}
}
this.to=null;
var wh=lst[this.mde[3]]+lst[this.mde[4]];
this.slide=[slide];
var nu=Math.floor(this.p[this.mde[4]]/wh)+3;
for (var max,z1=0;z1<nu;z1++){
max=wh*z1-wh;
if (z1>0){
this.slide[z1]=slide.cloneNode(true);
this.p.appendChild(this.slide[z1]);
}
this.slide[z1].style[this.mde[1]]=wh+'px';
this.slide[z1].style[this.mde[0]]=max+'px';
}
this.min=wh;
this.max=max;
this.lgth=this.slide.length;
this.maxcnt=Math.round(this.min/this.moveby-1);
this.cnt=0;
this.addevt(this.p,'mousemove','move');
this.addevt(this.p,'mouseout','Pause');
var pan=typeof(o.Distance)=='number'?o.Distance:100;
this.panends=[pan,this.sv(this.p,this.mde[1])-pan];
this.maxspd=o.MaxSpeed||5;
this.inc=0;
this.ud=0;
this.scroll();
}
zxcPanCarousel.prototype={
move:function(p,e){
var x=this.mse(e)[this.mde[2]]-this.pos(this.p)[this.mde[2]];
this.inc=0;
if (x<this.panends[0]){
this.ud=1;
this.inc=this.maxspd*(1-x/this.panends[0]);
}
if (x>this.panends[1]){
this.ud=-1;
this.inc=this.maxspd*((x-this.panends[1])/this.panends[0]);
}
},
scroll:function(p,e){
for (var z0=0;z0<this.slide.length;z0++){
this.slide[z0].style[this.mde[0]]=this.sv(this.slide[z0],this.mde[0])+Math.floor(this.inc*this.ud)+'px';
if ((this.ud<0&&this.sv(this.slide[z0],this.mde[0])<-this.min)||(this.ud>0&&this.sv(this.slide[z0],this.mde[0])>this.max)){
this.slide[z0].style[this.mde[0]]=this.sv(this.slide[z0],this.mde[0])+(this.min*this.slide.length*(this.ud<0?1:-1))+'px';
}
}
var oop=this;
this.to=setTimeout(function(){ oop.scroll(); },50);
},
Forward:function(nu){
this.inc=nu||1;
this.ud=-1;
},
Back:function(nu){
this.inc=nu||1;
this.ud=1;
},
Pause:function(){
var e=window.event?window.event:arguments.callee?arguments.callee.caller.arguments[0]:false;
if (e&&e.type=='mouseout'){
var obj=e.relatedTarget||e.toElement;
if (obj){
while (obj.parentNode){
if (obj==this.p){
return false;
}
obj=obj.parentNode;
}
}
}
this.inc=0;
this.ud=0;
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
},
mse:function(e){
if (document.all) return [e.clientX+this.docs()[0],e.clientY+this.docs()[1]];
return [e.pageX,e.pageY];
},
docs:function(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
sv:function(obj,par){
if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
}
}
/*]]>*/
</script>
</head>
<body>
<div id="tst" >
<div class="slide" >
<div class="frame" ><img src="http://www.dynamicdrive.com/dynamicindex4/fruits.jpg" /></div>
<div class="frame" ><img src="http://www.dynamicdrive.com/dynamicindex4/cave.jpg"/></div>
<div class="frame" ><img src="http://www.dynamicdrive.com/dynamicindex4/pool.jpg"/></div>
<div class="frame" ><img src="http://www.dynamicdrive.com/dynamicindex4/autumn.jpg"/></div>
<div class="frame" ><img src="http://www.dynamicdrive.com/dynamicindex4/dog.jpg" /></div>
</div>
</div>
<input type="button" name="" value="Forward" onmousedown="C.Forward(2);" onmouseup="C.Pause();" />
<input type="button" name="" value="Back" onmousedown="C.Back(2);" onmouseup="C.Pause();" />
<script type="text/javascript">
/*<![CDATA[*/
var C=new zxcPanCarousel({
Mode:'Horizontal', // (optional) the mode, 'Horizontal' or 'Vertical'. (string, default = 'Horizontal')
ID:'tst', // the unique ID name of the slide DIV element. (string)
Distance:250, // (optional) the distance from the ends to pan. (digits, default = 100)
MaxSpeed:10 // (optional) the maximum speed to pan. (digits, default = 5)
});
/*]]>*/
</script></body>
</html>
New Comer (less than 5 posts)
CMotion Image Gallery - Repeat image train possible?
Posting Permissions
Reply With Quote
Bookmarks