Płynne przejścia między obrazkami Opcje

[Jokeer]

Cześć, mam taki kod, który zmienia co jakiś czas logo na mojej stronie. Niestety obrazki zmieniają się bez żadnego przejścia. Jak mogę zmodyfikować ten kod, żeby uzyskać efekt jakiegoś łagodnego przejścia?

[PHP] pobierz, plaintext 
<script language="javascript">
 
 
var delay=5000 //set delay in miliseconds
 
var curindex=0
 
var randomimages=new Array()
 
        randomimages[0]="images1.jpg"
 
        randomimages[1]="images2.jpg"
 
        randomimages[2]="images3.jpg"
 
        randomimages[3]="images4.jpg"
 
        randomimages[4]="images5.jpg"
 
        randomimages[5]="images6.jpg"
 
var preload=new Array()
 
for (n=0;n<randomimages.length;n++)
 
{
 
        preload[n]=new Image()
 
        preload[n].src=randomimages[n] //cycle('fade');
 
 
}
 
document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]
+'">')
 
function rotateimage()
 
{
 
if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length))
)){
 
curindex=curindex==0? 1 : curindex-1
 
}
 
else
 
curindex=tempindex
 
        document.images.defaultimage.src=randomimages[curindex]
 
}
 
setInterval("rotateimage()",delay)
 
</script>
[PHP] pobierz, plaintext 

Dzięki i pozdrawiam

[kamil4u]

W rzeczywistości wygląda to tak, że masz jeden obrazek nad drugim. Wtedy jeden obrazek ma ustawioną przezroczystość na 100%, a drugi na 0%. W przypadku zmiany co pewien czas( setInterval ) zmieniamy stopień przezroczystości zamieniając odpowiednio wartości procentowe.

Przykład:
http://www.simonbattersby.com/blog/simple-...mage-crossfade/

[Jokeer]

Dzięki za zainteresowanie i ten przykład, ale niestety jako, że jestem zielony w JS-ie to nie potrafię zastosować go do mojego przykładu...

Mógłby ktoś dodać odpowiednie instrukcję (podejrzewam że coś z fadeOut) do mojego kodu?

Będę bardzo wdzięczny

[kamil4u]

Zastosuj kod z przykładu( dokładnie to co chcesz ) lub zleć to komuś.

Pozdrawiam

PS. Twój kod jest przestarzały. Nie da się w łatwy sposób go przerobić, trzeba by było napisać całość od nowa. Więc najlepszym wyjście jest zastosowanie kodu z linku

[Jokeer]

Wkleiłem ten kod z przykładu, ale niestety wyświetla mi się tylko pierwszy obrazek

[kamil4u]

Myślę, że musisz pokazać kod - najlepiej umieszczając stronę na jakimś serwerze

[IProSoft]

Na podstawie Twojego kodu, żebyś złapał "o co biega"

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript">
 
    var delay = 5000;
 
    var curindex = 0;
 
    var randomimages = [ 'images1.jpg', 'images2.jpg', 'images3.jpg', 'images4.jpg', 'images5.jpg', 'images6.jpg' ];
 
    var preload= [];
 
    for ( n=1; n<=randomimages.length; n++ )
    {
		preload[n] = new Image();
		preload[n].src = randomimages[n] //cycle('fade');
    }
 
    document.write('<img name="defaultimage" src="' + randomimages[Math.floor(Math.random()*(randomimages.length))] + '">');
 
    function rotateimage()
    {
		tempindex = Math.floor( Math.random()*(randomimages.length) );
		if( curindex == tempindex )
		{
			return rotateimage();
		}
 
		curindex = tempindex;
 
		$(document.images.defaultimage).fadeOut( 'fast', function(){
			document.images.defaultimage.src = randomimages[curindex];
			$(document.images.defaultimage).fadeIn();
		});
 
    }
 
    setInterval( "rotateimage()", delay );
 
</script>
[JAVASCRIPT] pobierz, plaintext 

Żeby zadziałało potrzebujesz jQuery czyli w heade strony umieść:

[HTML] pobierz, plaintext 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
[HTML] pobierz, plaintext