Plynulé prelínanie obrázkov cez javascript

Príspevok od používateľa **Grim** » 02 okt 2011, 1:29

Skúšam to už tri dni a stále mi to nejde. Popíšem situáciu. Chcem vytvoriť proces, pri ktorom sa po načítaní stránky, na 3 sekundy (toto by som chcel, aby sa dalo ľahko meniť) zobrazí jeden obrázok ako ilustrácia. Po troch sekundách sa prelínaním prejde na druhý obrázok. Prelínanie by malo trvať asi sekundu. chem to spraviť dynamickým menením "opacity" a "filter:alpha" cez javascript. Mali by sa prelínať zatiaľ 2 obrázky, ale neskôr určite chcem pridávať daľšie. Zatiaľ ale riešim najľahšiu variantu a to je preľnutie prvého obrázku s druhým po troch sekundách od načítania stránky. Samozrejme, že potom keď budem obrázky postupne pridávať, chcem aby sa každý obrázok zobrazoval 3 sekundy. Vyskúšal som už veľa kombinácii a už neviem čo s tým. Končím pri tejto:

Kód: Vybrať všetko

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Skúška javascriptu</title>
<meta name="robots" content="index,follow">
<meta http-equiv="imagetoolbar" content="no">
<meta name="publisher" content="Grim">
<meta name="author" content="Grim">
<meta name="copyright" content="Grim, 2011">
<meta http-equiv="Content-Style-Type" content="text/css">
</head>

<style>
body {
	background-image: url("back.png");
	background-position: center top;
	background-repeat: repeat-x;
	background-attachment: scroll;
	background-color: #ffffff;
	color: black;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	overflow-y: scroll;
	overflow-x: visible;
	}

	a:link {color: black;} 
	a:visited {color: black;}
	a:active {color: black;}
	a:hover {color: black;}
	a {text-decoration: underline;}
	a:hover {text-decoration: none;}
	p {text-indent: 0px; text-align: justify; width: 600px;}

.image {
	opacity: 1.0;
	filter:alpha (opacity=100);
}

.image2 {
	opacity: 0.0;
	filter:alpha (opacity=0);
	z-index: -1;
	position: absolute; left: 0px; top: 0px;
}
 </style>


<script language="javascript" type="text/javascript">


function skuska() {

var c = 1;
do {
window.setInterval("obr2.style.filter='"+c+"'", 50);
c++;
}
while(c<101);

}


</script>

<body onLoad="skuska()">

<img src="1.png" id="obr1" alt="image" class="image">
<img src="2.png" id="obr2" alt="image" class="image2">

</body>

To znamená, že mám pod sebou dva obrázky, jeden je viditeľný, druhý nie. Počas prelínania by sa každú stotinu mala zmeniť hodnota "opacity" a "filter:alpha" prvému obrázku (viditeľnému) o jedno % nižšie a druhému obrázku (neviditeľnému) hodnota týchto dvoch parametrov v css o 1% nahor. Po dokončení prelínania by sa druhý obrázok zobrazoval daľšie tri sekundy a potom by prišiel na radu daľší obrázok. Ka by daľší obrázok nebol k dispozícii, preľnulo by sa na prvý. Dúfam, že mi s tým niekto pomôže a aj mi to skúsi vysvetliť, lebo javascript je moja slabina a rád by som sa ho naučil, ale niesom schopný ho nejak pochopiť. Ďakujem za každú pomoc, nemusíte mi to rovno napísať, stačí, keď ma k tomu nejakými nápovedami dokopete a ja si to už poskladám.

Toto mi funguje iba v IE

Kód: Vybrať všetko

<script language="javascript" type="text/javascript">
var fade_interval = 10; // rychlost intervalu
var fade_pause = 3; // pauza zobrazenia obrazku
var fade_step = 1; // rychlost prelinania (hodnota ktora sa bude odpocitavat/pripocitavat k alphe)
//
var fade_pt = 100 + (fade_pause * 1000 / fade_interval) / 2;
var switch_a = false;
var a1 = 100;
var a2 = 0;

function fading()
{
    if (a1 > 99 && a1 < fade_pt || a2 > 99 && a2 < fade_pt)
    {}
    else
    {
        if (a1 < 1 && a2 > 99 || a1 > 99 && a2 < 1)
        {
            if (!switch_a)
            {
                switch_a = true;
            }
            else
            {
                switch_a = false;
            }
        }
    }
    if (switch_a)
    {
        a1 -= fade_step;
        a2 += fade_step;
    }
    else if (!switch_a)
    {
        a1 += fade_step;
        a2 -= fade_step;
    }
    document.getElementById('obr1').style.filter = "alpha (opacity=" + a1 + ")";
    document.getElementById('obr2').style.filter = "alpha (opacity=" + a2 + ")";
}

setInterval(fading, fade_interval);
</script>

a toto mi skoro funguje v Opere, FF a Chrome. (je tam dáky bug pri prelínaní, ktorý neviem odstrániť)

Kód: Vybrať všetko

<script language="javascript" type="text/javascript">
var fade_interval = 10; // rychlost intervalu
var fade_pause = 1; // pauza zobrazenia obrazku
var fade_step = 1; // rychlost prelinania (hodnota ktora sa bude odpocitavat/pripocitavat k alphe)
//
var fade_pt = 100 + (fade_pause * 1000 / fade_interval) / 2;
var switch_a = 2;
var a1 = 100;
var a2 = 0;
//
var b1 = 100;
var b2 = 0;
//
function fading()
{
    if (a1 > 98 && b1 < fade_pt || a2 > 98 && b2 < fade_pt)
    {
 // switch_a = 3;
  }
    else
    {
        if (a1 < 1 && a2 > 98 || a1 > 98 && a2 < 1)
        {
            if (switch_a == 2)
            {
                switch_a = 1;
            }
            else
            {
                switch_a = 2;
            }
        }
            
    }
 if (switch_a == 1)
    {
        a1 -= fade_step;
        a2 += fade_step;
        //
        b1 -= fade_step;
        b2 += fade_step;
    }
    else if (switch_a == 2)
    {
        a1 += fade_step;
        a2 -= fade_step;
        //
    b1 += fade_step;
        b2 -= fade_step;
    }
    
    if (a1 < 0)
    {
        a1 = 0;
    }
    else if (a1 > 99)
    {
        a1 = 99;
    }
    if (a2 < 0)
    {
        a2 = 0;
    }
    else if (a2 > 99)
    {
        a2 = 99;
    }         
    
document.getElementById('obr1').style.opacity = "0."+a1 ;
document.getElementById('obr2').style.opacity = "0."+a2 ;  
}
window.setInterval(fading, fade_interval);
</script>

Príspevok od používateľa **Grim** » 02 okt 2011, 14:33

...skvelé...neskúšal som to, ale asi viem, prečo ti to druhé nefunguje. Vlastnosť "opacity" pracuje s hodnotami od 0.0 do 1.0 a nie s hodnotami 0 - 100 ako filter:alpha...

maros7777

preco to nespravis cez jquery? - http://jquery.malsup.com/cycle/

Príspevok od používateľa **Grim** » 02 okt 2011, 15:03

...hľadám najskôr jednoduché riešenia, ktoré mám šancu pochopiť...nemám zatiaľ vo zvyku programovať štýlom Ctrl+C Ctrl+V...

weroro: skúšal som tú druhú verziu a bude to presne preto, prečo som napísal...skúsiš mi to upraviť tak, aby to pracovalo s hodnotami od 0.0 do 1.0?

//a môžem ťa poprosiť či by si mi to nevysvetlil? Lebo teraz by som tam chcel pridať daľšie dva obrázky a neviem čo tam mám dopísať...

// Upravené //

Kód: Vybrať všetko

<html>     
  <head>         
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">         
    <title>Skúška javascriptu          
    </title>         
    <meta name="robots" content="index,follow">         
    <meta http-equiv="imagetoolbar" content="no">         
    <meta name="publisher" content="Grim">         
    <meta name="author" content="Grim">         
    <meta name="copyright" content="Grim, 2011">         
    <meta http-equiv="Content-Style-Type" content="text/css">     
    <style>
  
  body {
              background-image: url("back.png");       
              background-position: center top;           
              background-repeat: repeat-x;           
              background-attachment: scroll;           
              background-color: #ffffff;           
              color: black;           
              font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;           
              font-size: 13px;           
              overflow-y: scroll;           
              overflow-x: visible;
  }           
  
  a:link {       
              color: black;       
  }            
  
  a:visited {
              color: black;
  }
              
  a:active {
              color: black;
  }
                  
  a:hover {
              color: black;
  }
                  
  a {
              text-decoration: underline;
  }
                  
  a:hover {
              text-decoration: none;
  }
                  
  p {
              text-indent: 0px; 
              text-align: justify; 
              width: 600px;
  }
                          
  .visible {                
              opacity: 1.0;                    
              filter:alpha (opacity=100);
              position: absolute;                 
              left: 0px;                 
              top: 0px;                
  }
                          
  .hidden {                
              opacity: 0.0;                    
              filter:alpha (opacity=0);                    
              z-index: -1;                    
              position: absolute;                 
              left: 0px;                 
              top: 0px;                
  }    
   
  </style>   
<script language="javascript" type="text/javascript">
var celkom_obrazkov = 3; // tu nastavíš počet obrázkov ktoré chceš zobrazovať
var fade_interval = 10; // rychlost intervalu v milisekundach
var fade_pause = 3; // pauza zobrazenia obrazku v sekundách
var fade_step = 2; // rychlost prelinania (hodnota ktora sa bude odpocitavat/pripocitavat k alphe)
//
var pos1 = 1;
var pos2 = 2;
var fade_pt = fade_pause * 1000;
var switch_a = false;
var a1 = 100;
var a2 = 0;
//
var b1 = 0;
var b_sw = true;
//
function fading()
{
	if (a1 > 98 && b1 < fade_pt || a2 > 98 && b1 < fade_pt)
	{
		b_sw = false;
	}
	else
	{
		if (a1 < 1 && a2 > 98 || a1 > 98 && a2 < 1)
		{
			b_sw = true;
			if (!switch_a)
			{
				switch_a = true;
			}
			else
			{
				switch_a = false;
			}
			b1 = 0;
		}
	}
	if (switch_a)
	{
		a1 -= fade_step;
		a2 += fade_step;
	}
	else if (!switch_a)
	{
		a1 += fade_step;
		a2 -= fade_step;
	}
	if (!b_sw)
	{
		b1 += fade_interval;
	}
	if (a1 < 0)
	{
		a1 = 0;
	}
	else if (a1 > 99)
	{
		a1 = 99;
	}
	if (a2 < 0)
	{
		a2 = 0;
	}
	else if (a2 > 99)
	{
		a2 = 99;
	}
	if (a1 < 10 && a1 > 0)
	{
		dat1 = "0.0" + a1;
	}
	else
	{
		dat1 = "0." + a1;
	}
	if (a2 < 10 && a2 > 0)
	{
		dat2 = "0.0" + a2;
	}
	else
	{
		dat2 = "0." + a2;
	}
	
	// if Opera, FF, Chrome
	document.getElementById('obr' + pos1).style.opacity = dat1;
	document.getElementById('obr' + pos2).style.opacity = dat2;   
	// if IE
	document.getElementById('obr' + pos1).style.filter = "alpha (opacity=" + a1 + ")";
  document.getElementById('obr' + pos2).style.filter = "alpha (opacity=" + a2 + ")";
	
  	
	if (dat1 == "0.0" && b1 == fade_pt)
	{
		if (pos1 == celkom_obrazkov)
		{
			pos1 = 1;
		}
		else
		{
			pos1++;
		}
	}
	if (dat2 == "0.0" && b1 == fade_pt)
	{
		if (pos2 == celkom_obrazkov)
		{
			pos2 = 1;
		}
		else
		{
			pos2++;
		}
	}
}
window.setInterval(fading, fade_interval); 
</script>
  </head>
  <body>         
    <img src="1.png" id="obr1" alt="Krby" class="visible">         
    <img src="2.png" id="obr2" alt="Krby" class="hidden">    
    <img src="3.png" id="obr3" alt="Krby" class="hidden">       
  </body>
</html>

Príspevok od používateľa **Grim** » 02 okt 2011, 16:50

...no tak nič

...a teraz keby som chel pridať daľšie obrázky tak čo mám kam dopísať?...

Editoval som predošlý príspevok: Takže si to kukni.

Keď budeš chcieť pridať ďalší obrázok, stačí ti vytvoriť nový <IMG>, ktorému nastavíš ID s číslom o jedno vyššie, čiže ak sú tam teraz id="obr1" id="obr2", tak ďalší obrázok bude mať id="obr3". Tak isto nezabudni na to, že prvý obrázok je viditeľný a ostatné sú neviditeľné, takže som tvoj CSS, konkrétne položky .image a .image2 premenoval na visible a hidden aby bolo jasne čo je viditeľné a čo nie.

V JS ti potom stačí už iba zmeniť premennú celkom_obrázkov na tvoj počet img tagov. Dá sa to aj z automatizovať aby si to v JS upravovať nemusel ale to neviem urobiť.

Príspevok od používateľa **Grim** » 02 okt 2011, 18:05

...skvelé...idem vyskúšať...

//keď tam dám tri obrázky, tak to funguje skvele, akurát idú v poradí 1,3,2,1,3,2...ale to nevadí, to je jedno...lenže keď pridám štvrtý obrázok, tak to ide v poradí 1,3,2,4,3,1,3,2,4,3....

Nechceš to radšej vo flashi?

Príspevok od používateľa **Grim** » 02 okt 2011, 18:38

...no to by som nemohol sám meniť, lebo flash ešte neovládam...

ale weroro ti to spraví tak, aby si to meniť mohol

Príspevok od používateľa **Grim** » 02 okt 2011, 19:03

...naozaj? To som nevedel, že sa to dá...no tak nech skúsi...

//...inak keď som tam dal 5 obrázkov, tak to išlo v poradí 1,3,2,4,3,5,4, 1,3,2...

Nech ti slúži

Príspevok od používateľa **Grim** » 03 okt 2011, 1:54

...ďakujem...a týmto by sme to mohli aj uzavrieť...

Plynulé prelínanie obrázkov cez javascript

Plynulé prelínanie obrázkov cez javascript

Re: Plynulé prelínanie obrázkov cez javascript

Re: Plynulé prelínanie obrázkov cez javascript

Re: Plynulé prelínanie obrázkov cez javascript

Re: Plynulé prelínanie obrázkov cez javascript

Re: Plynulé prelínanie obrázkov cez javascript

Re: Plynulé prelínanie obrázkov cez javascript

Re: Plynulé prelínanie obrázkov cez javascript

Re: Plynulé prelínanie obrázkov cez javascript

Re: Plynulé prelínanie obrázkov cez javascript

Re: Plynulé prelínanie obrázkov cez javascript

Re: Plynulé prelínanie obrázkov cez javascript

Re: Plynulé prelínanie obrázkov cez javascript

Re: Plynulé prelínanie obrázkov cez javascript

Re: Plynulé prelínanie obrázkov cez javascript