PDA

View Full Version : javascript image crawler



Harleyy
07-11-2011, 09:23 AM
Hello everyone,
I want to make an image crawling marquee
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

For this i have made a table, inserted the div in the middle tr and the 1st tr with previous button and the last tr with the next button.

I have two requirements,
1. I want previous and next arrows to scroll exactly the same as mentioned in the link above(http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm)(i.e speeding up in the extreme ends) when mouse is over the arrows. This should happen on the previous and next arrows on mouseover.

2. I want the scroll to move automatically and it should stop on mouse over it. The automatic scroll should continue forever till mouse over (both on scroll and arrows)

So Summary is,
There should be an auto slide of the scroll very slowly and when one goes to the previous or the next buttons, it should be incremented fast and on mouse out, again back to the normal slow scroll.

Awaiting replies.

Thanks and Regards
Harley

Harleyy
07-11-2011, 09:24 AM
It will be great if there is a solution to this!!

vwphillips
07-11-2011, 02:53 PM
<!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[*/
.crawler {
position:relative;left:0px;top:0px;width:200px;height:400px;border:solid red 1px;
}

.inner {
position:absolute;left:0px;top:0px;
}

.inner IMG{
width:200px;height:150px;float:left;margin-Top:5px;
}

.inner2 {
position:absolute;left:0px;top:0px;width:2000px;
}

.inner2 IMG {
width:200px;height:150px;float:left;margin-Left:5px;
}

/*]]>*/
</style></head>

<body>
<table border="1">
<tr>
<td><input type="button" name="" value="Left" onmouseover="C2.Scroll(-10);" onmouseout="C2.Scroll();"/></td>
<td>
<div id="c2" class="crawler" onmouseover="C2.Scroll(0);" onmouseout="C2.Scroll();" style="left:0px;width:400px;height:150px;">
<div class="inner2" >
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/bonsai.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/beach.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/mountain.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/coco.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/water.jpg" />
</div>
</div>
</td>
<td><input type="button" name="" value="Right" onmouseover="C2.Scroll(10);" onmouseout="C2.Scroll();"/></td>
</tr>
</table>

<script type="text/javascript">
/*<![CDATA[*/

function zxcCrawler(o){
var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height']:['left','offsetLeft','offsetWidth','width'],obj=document.getElementById(o.ID),slide=obj.getElementsByTagName('DIV')[0],psz=obj[mde[2]],clds=slide.getElementsByTagName('*'),lst=clds[clds.length-1],sz=lst[mde[1]]+lst[mde[2]],nu=Math.ceil(psz/sz)+1,slider=document.createElement('DIV'),z0=0,spd=o.Speed,ssz=o.ParentSize;
obj.style.overflow='hidden';
obj.style[mde[3]]=(isFinite(ssz)&&clds[ssz]?clds[ssz][mde[1]]:psz)+'px';
slider.style.position='absolute';
slider.style[mde[0]]='0px';
obj.appendChild(slider);
for (;z0<nu;z0++){
slide=z0>0?slide.cloneNode(true):slide;
slide.style[mde[0]]=sz*z0+'px';
slider.appendChild(slide);
}
this.mde=mde;
this.sz=sz;
this.slider=slider;
this.spd=typeof(spd)=='number'?spd:-1;
this.to=null;
this.Scroll();
}

zxcCrawler.prototype.Scroll=function(spd){
clearTimeout(this.to);
var oop=this,spd=typeof(spd)=='number'?spd:this.spd,slider=this.slider,sz=this.sz,mde=this.mde[0],pos=parseInt(slider.style[mde])+spd;
if ((spd<0&&pos<-sz)||(spd>0&&pos>0)){
pos+=sz*(spd<0?1:-1);
}
slider.style[mde]=pos+'px';
this.spd=spd!=0?Math.abs(this.spd)*(spd>0?1:-1):this.spd;
this.to=setTimeout(function(){ oop.Scroll(spd); },20);
}


var C2=new zxcCrawler({
ID:'c2', // the unique ID name of the parent DIV. (string)
Mode:'Horizontal', //(optional) the mode of execution, 'Horizontal' or 'Vertical'. (string, default = 'Horizontal')
Speed:-1, //(optional) the scroll speed, >0 = clockwise, <0 = anticlockwise. (number, default = -1)
ParentSize:3 //(optional) the number of images to display. (number, default = the current size of the parent DIV)
});


/*]]>*/
</script>
</body>

</html>

Harleyy
07-12-2011, 08:52 AM
Thanks a lot ... This is exactly what i wanted ...