Imposible repetir js en la misma página

[nixolax]

Iniciado por laratik

Mi primera pregunta es ¿por que no crear una clase rotator y ya? de esa manera no tendrías que usar rotator1, rotator2, rotator3, ..., rotatorN y mi segunda pregunta ¿en donde ejecutas el segundo rotator? espero que tengas una función so_init2 o algo x el estilo donde la mandes a llamar de igual manera.

No creo que halla ningún problema en colocar el mismo script dos veces, aparte de la duplicidad de código, aunque puedes probar a parametrizar la función:

Código Javascript:

window.addEventListener('DOMContentLoaded', function () {,so_init("rotator1")},false);
window.addEventListener('DOMContentLoaded', function () {,so_init("rotator2")},false);
function so_init(id) {
    //code
    imgs = d.getElementById(id).getElementsByTagName('img');
    //code
}
 

De esta manera no duplicarias código. Si tú función sirve para un elemento, debería funcionar para muchos.

Gracias por responder.. Lo que vos decís es que es innecesario crear diferentes clases? Apuesto por eso porque simplificaría todo.. pero algo mal estoy haciendo porque esto no funciona:

<div id="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 id="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>

obviamente, cambie el estilo por este:

<style rel="stylesheet" type="text/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%;
}
</style>

y el js quedó así:

<script type="text/javascript">
window.addEventListener?window.addEventListener('l oad',so_init,false):window.attachEvent('onload',so _init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
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);
imgs = d.getElementById('rotator').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);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);
}
else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
</script>

Esto hace que solo funcione una galería de fotos, y lo podés ver acá :
http://www.alemmotor.com.ar/usados_2.html