html - Rotating images in JavaScript -

should easy question knows js.

i have webpage in footer 4 images rotating.

<div class="column_w190 fl margin_right_40">     <!-- start: rotating images -->     <div id="rotating-item-wrapper">         <img src="images/rotating/greenpeople.jpg" alt="image" class="rotating-item" width="175" height="175" />         <img src="images/rotating/entrance.jpg" alt="image" class="rotating-item" width="175" height="175" />         <img src="images/rotating/bluepeople.jpg" alt="image" class="rotating-item" width="175" height="175" />         <img src="images/rotating/reflection3.jpg" alt="image" class="rotating-item" width="175" height="175" />         <img src="images/rotating/reflection2.jpg" alt="image" class="rotating-item" width="175" height="175" />         <img src="images/rotating/manequine.jpg" alt="image" class="rotating-item" width="175" height="175" />         </div><!-- end: rotating images images -->     <p>straffen toebak</p> </div> 

where rotating-item defined in script found online:

$(window).load(function() { //start after html, images have loaded    var infiniterotator =    {     init: function()     {       //initial fade-in time (in milliseconds)       var initialfadein = 1000;        //interval between items (in milliseconds)       var iteminterval = 2000;        //cross-fade time (in milliseconds)       var fadetime = 2500;        //count number of items       var numberofitems = $('.rotating-item').length;        //set current item       var currentitem = 0;        //show first item       $('.rotating-item').eq(currentitem).fadein(initialfadein);        //loop through items           var infiniteloop = setinterval(function(){         $('.rotating-item').eq(currentitem).fadeout(fadetime);          if(currentitem == numberofitems -1){           currentitem = 0;         }else{           currentitem++;         }         $('.rotating-item').eq(currentitem).fadein(fadetime);        }, iteminterval);      }    };     infiniterotator.init();  }); 

the problem when add second column should have rotating images, images in second column shown consequtively, i.e. show left:1, left:2, left3, left4, left5, left6, right1, right2 instead of left1 + right1, left2+right2.

so i'm guessing can't add images on right same class "rotating-item", don't know in js how initiate new instance of class.

expression $('.rotating-item') grabs dom html elements class="rotating-item" in order presented in dom top of page down, , not care, in different columns.

i presume, want 2 divs rotating (transitioning) images. thing solved way:

/* javascript */ function rotateimages (container) // container -- shall rotate images  {     var initialfadein = 1000; // in miliseconds     var iteminterval = 2000; // in miliseconds     var fadetime = 2500; // in miliseconds     var currentitem = 0; //set current item       // find images in container     // no further need class="rotating-item"     var images = container.find('img');      // hide images     images.hide()      // show first item     images.eq(currentitem).fadein(initialfadein);      // loop through items     // timer id returned function,     // can terminate rotating in future     return setinterval(function(){         images.eq(currentitem).fadeout(fadetime);          if(currentitem === images.length -1)             currentitem = 0;         else             currentitem++;          images.eq(currentitem).fadein(fadetime);         }, iteminterval);        }    }; 

then set unique id every column, want rotate images, eg:

<!-- html --> <div id="rotating-item-wrapper-one">     <!-- img elements not need have special class,        rotate img in div -->     <img ...></img>     <img ...></img> </div> <div id="rotating-item-wrapper-two">     <img ...></img>     <img ...></img>     ... </div> 

and finaly initiate rotator each column separately jquery selector ids in javascript:

/* javascript */ var col1 = $('#rotating-item-wrapper-one') var col2 = $('#rotating-item-wrapper-two') var timer1 = rotateimages(col1); var timer2 = rotateimages(col2); 

you can call clearinterval() stop rotating, ie:

/* javascript */ // result of action clearinterval(timer1) // stops rotating in col1