Hola, buenas tardes. Estoy teniendo un problema hace bastante tiempo y me gustaría que me lo pudiesen solucionar.
El problema es que con un js, style css y unos div, no puedo poner dos galerías en una misma página. Más que una galería, sería como un pasador de imágenes.
Tengo este js por duplicado, cambiando el
rotator1 por
rotator2. es decir, tengo dos js, uno que llama al elemento rotator1 y otro igual solo que llama a rotator2
Cita: <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('rotator1').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>
tengo este style
Cita: <style rel="stylesheet" type="text/css">
#rotator1 {
border: 8px outset #000;
display:block;
padding:0;
overflow: hidden;
position: relative;
width:600px;
height: 450px;
}
#rotator1 img {
border: 0;
padding: 0;
width: 100%;
}
#rotator2 {
border: 8px outset #000;
display:block;
padding:0;
overflow: hidden;
position: relative;
width:600px;
height: 450px;
}
#rotator2 img {
border: 0;
padding: 0;
width: 100%;
}
</style>
entonces, por qué no funciona esto?:
Cita: <div id="rotator1">
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa1.jpg" /></center>
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa2.jpg" /></center>
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa3.jpg" /></center>
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa4.jpg" /></center>
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa5.jpg" /></center>
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa6.jpg" /></center>
<center><img class="rotator1" width="600" height="450" src="http://www.alemmotor.com.ar/images/villa7.jpg" /></center>
</div><br><br>
<div id="rotator2">
<center><img class="rotator2" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio1.jpg" /></center>
<center><img class="rotator2" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio2.jpg" /></center>
<center><img class="rotator2" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio3.jpg" /></center>
<center><img class="rotator2" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio4.jpg" /></center>
<center><img class="rotator2" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio5.jpg" /></center>
<center><img class="rotator2" width="600" height="450" src="http://www.alemmotor.com.ar/images/rio6.jpg" /></center>
</div>