| vwphillips |
12-10-2012 02:14 PM |
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[*/
.parent {
position:relative;left:200px;height:150px;width:200px;border:solid red 1px;
}
.example {
position:absolute;overflow:hidden;left:0px;top:0px;height:150px;width:200px;
}
#tst {
position:absolute;left:0px;top:100px;height:50px;width:600px;
}
.but {
position:absolute;left:-10px;top:65px;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
function zxcSlider(id,ud){
var obj=document.getElementById(id);
if (obj){
clearTimeout(zxcSlider[id]);
if (typeof(ud)=='number'&&ud!=0){
obj.style.left=Math.max(Math.min(obj.offsetLeft+ud,0),-obj.width+obj.parentNode.offsetWidth)+'px';
zxcSlider[id]=setTimeout(function(){ zxcSlider(id,ud); },100);
}
}
}
/*]]>*/
</script>
</head>
<body>
<div class="parent" >
<div class="example" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
</div>
<img class="but" src="http://www.vicsjavascripts.org.uk/StdImages/Left1.gif" onmousedown="zxcSlider('tst',-1);" onmouseup="zxcSlider('tst');" alt="img" />
<img class="but" src="http://www.vicsjavascripts.org.uk/StdImages/Right1.gif" onmousedown="zxcSlider('tst',1);" onmouseup="zxcSlider('tst');" alt="img" style="left:190px;" />
</div>
</body>
</html>
or
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[*/
.parent {
position:relative;left:200px;height:150px;width:200px;border:solid red 1px;
}
.example {
position:absolute;overflow:hidden;left:0px;top:0px;height:150px;width:200px;
}
#tst {
position:absolute;left:0px;top:100px;height:50px;width:600px;
}
.but {
position:absolute;left:-10px;top:65px;
}
.bar {
position:absolute;overflow:hidden;left:0px;top:155px;height:20px;width:200px;background-Color:#FFCC66;border:solid red 1px;
}
#slide {
position:absolute;left:0px;top:0px;height:20px;width:30px;background-Color:#FFFFCC;cursor:move;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Image Slider. (09-December-2012)
// by Vic Phillips http://www.vicsjavascripts.org.uk
var zxcImageSlider={
init:function(o){
var id=o.ImageID,slide=document.getElementById(o.SlideID),img=document.getElementById(id),mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','height',1]:['left','width',0];
if (img&&slide){
o=zxcImageSlider['zxc'+id]={
mde:mde,
img:img,
slide:slide,
imm:this.s(img.parentNode,mde[1])-this.s(img,mde[1]),
smm:this.s(slide.parentNode,mde[1])-this.s(slide,mde[1]),
drag:false
}
this.addevt(slide,'mousedown','down',o);
this.addevt(document,'mousemove','move',o);
this.addevt(document,'mouseup','up',o);
}
},
down:function(e,o){
document.onselectstart=function(event){ window.event.returnValue=false; }
o.lst=[e.clientX,e.clientY][o.mde[2]];
o.drag=o.slide;
this.rtn(e);
},
move:function(e,o){
if (o.drag){
var mse=[e.clientX,e.clientY][o.mde[2]];
o.drag.style[o.mde[0]]=Math.min(Math.max(this.s(o.drag,o.mde[0])+mse-o.lst,0),o.smm)+'px';
o.img.style[o.mde[0]]=this.s(o.drag,o.mde[0])/o.smm*o.imm+'px';
o.lst=mse;
this.rtn(e);
}
},
up:function(e,o){
if (o.drag){
o.drag=false;
this.rtn(e);
}
},
rtn:function(e){
if(e.stopPropagation){
e.stopPropagation();
}
if (!window.event){
e.preventDefault();
}
e.cancelBubble=true;
e.cancel=true;
e.returnValue=false;
return false;
},
s:function(obj,p){
if (obj.currentStyle) return parseInt(obj.currentStyle[p.replace(/-/g,'')]);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p));
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}
}
}
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
function Init(){
zxcImageSlider.init({
ImageID:'tst', // the unique ID name of the imade to slide. (string)
SlideID:'slide', // the unique ID name of the slider DIV. (string)
Mode:'Horizontal' //(optional) the mode of execution, 'Horizontal' or 'Vertical'. (string, delault = 'Horizontal')
});
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
/*]]>*/
</script>
</head>
<body>
<div class="parent" >
<div class="example" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
</div>
<div class="bar" ><div id="slide" ></div></div>
</div>
</body>
</html>
|
