Vill att denna skall kunna fada bättre. Den skall starta med att bilden är fadad och fadas upp för att sedan och fadas ner och sen byts det till nästa som fadas upp till normalt och sen ner till fade och byta. Så skal ldet gå runt på samma sätt. Som det är nu blir det inte rätt.
Nån som kan fixa detta åt mig? Tack på förhand!
xfade2.js
/*****
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com
Please leave this notice intact.
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;
// DON'T FORGET TO GRAB THIS FILE AND PLACE IT ON YOUR SERVER IN THE SAME DIRECTORY AS THE JAVASCRIPT!
// http://slayeroffice.com/code/imageCrossFade/xfade2.css
css = d.createElement("link");
css.setAttribute("href","slideshow1.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
d.getElementsByTagName("head")[0].appendChild(css);
imgs = d.getElementById("imageContainer").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .85;
setTimeout(so_xfade,1000);
}
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,1000);
} else {
setTimeout(so_xfade,100);
}
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) + ")";
}
}
index.php
<link rel="stylesheet" href='slideshow1.css' type="text/css" />
<script type="text/javascript" src="xfade2.js"></script>
<div id="imageContainer">
<img src="rotator/Bild1.jpg" border="0">
<img src="rotator/Bild2.jpg" border="0">
<img src="rotator/Bild3.jpg" border="0">
</div>
slideshow1.css
*
{
margin: 0;
padding: 0;
}
#imageContainer
{
border: 1px solid #000;
cursor: pointer;
overflow: hidden;
margin: auto;
position: relative;
width: 580px;
height: 100px;
margin-bottom:10px;
}
#imageContainer img
{
border: 0;
cursor: pointer;
width: 580px;
height: 100px;
}