Sto provando ad utilizzare uno script JS per creare una sorta di slideshow.
Funziona bene su di un div ma se lo provo ad applicare più div contemporaneamente mi da problemi...Come posso risolvere?
codice:/* Image Cross Fade Redux Version 1.0 Last revision: 02.15.2006 steve@slayeroffice.com Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html */ window.addEventListener?window.addEventListener('load',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','uploads/slideshow2.css'); css.setAttribute('rel','stylesheet'); css.setAttribute('type','text/css'); d.getElementsByTagName('head')[0].appendChild(css); imgs = d.getElementById('slideshow').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) + ')'; } }codice:#slideshow { border: 1px solid #000; overflow: hidden; margin: 50px auto 10px; position: relative; width: 400px; height: 300px; } #slideshow img { width: 400px; height: 300px; }Se volete vedere una prova guardate qui: http://leopardicalcio.altervista.org/prova.htmlcodice HTML:<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" href='slideshow.css' type="text/css" /> <script type="text/javascript" src="xfade2.js"></script></head><body> <div id="slideshow"> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /></div> <div id="slideshow"> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /></div> </body></html>
Sicuramente si tratta che non possono esserci due id identici nella stessa pagina dovrei farlo con una class ma non ci sono riuscito se modifico tutto con una classe...qualcuno potrebbe aiutarmi?
Rispondi quotando