Imposible repetir js en la misma página

[laratik]

Lo que esta creando es identificadores, al referirme a clases me refiero a:

Código HTML:

<div class="rotator">
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa1.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa2.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa3.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa4.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa5.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa6.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa7.jpg" /></center>
</div><br><br>
 
<div class="rotator">
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio1.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio2.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio3.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio4.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio5.jpg" /></center>
<center><img class="rotator" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio6.jpg" /></center>
</div>
 

y pues el javascript seria algo más complejo, pues se tendría que ejecutar cada elemento dentro de una iteración:

Código Javascript:

function so_init() {
    if(!d.getElementById || !d.createElement)return;
    css = d.createElement('link');
    css.setAttribute('href','slideshow2.css');
    css.setAttribute('rel','stylesheet');
    css.setAttribute('type','text/css');
    d.getElementsByTagName('head')[0].appendChild(css);
    elements = d.getElementsByClassName('rotator'); //getElementsByClassName solo funciona en exploradores modernos
    for (var i=0, element; element=elements[i]; i++) {
        imgs = element.getElementsByTagName('img');
            for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
            imgs[0].style.display = 'block';
            imgs[0].xOpacity = .99;
            setTimeout(so_xfade,3000);
    }
}
 

y el css:

Código CSS:

.rotator {
border: 8px outset #000;
display:block;
padding:0;
overflow: hidden;
position: relative;
width:600px; 
height: 450px;
}
.rotator img {
border: 0;
padding: 0;
width: 100%;
}