javascript image crawler

**Harleyy** · 07-11-2011, 09:23 AM

Hello everyone,
I want to make an image crawling marquee
http://www.dynamicdrive.com/dynamici...wler/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/dynamici...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

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[*/
.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 ...

Thread: javascript image crawler

Thread Tools

Search Thread

javascript image crawler

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions