[jquery] Jak zrobic petle, gdzie co jakis czas beda sie zmieniac divy z obrazkiem? Opcje

[basu]

Witam,
jak zrobic banner, gdzie divy z obrazkiem beda sie zmieniac w petli co jakis czas w efektem fadeOut(). Jak zapetlic taka animacje?
Chodzi o to ze przez powiedzmy 10s mam pokazany div=banner_right_1 z obrazkiem, pozniej po 10 sek wjezdza div=banner_right_2, po nast 10 sek div=banner_right_3 i spowrotem 1 i tak w kolko?

[HTML] pobierz, plaintext 
<div id="banner_right">
			<div id="banner_right_1"></div>
			<div id="banner_right_2"></div>
                        <div id="banner_right_3"></div>
</div>
[HTML] pobierz, plaintext 

[ShadowD]

Jak w JS to zrobić to nie wiem ale tak na szybko i jak nie patrzysz na standardy tu daj ten baner w lokalnej ramce i w niej daj z html przekierowanie po 10sec na następny dokument a w nim na trzeci a w trzecim na pierwszy...

1bane.html

[HTML] pobierz, plaintext 
<meta http-equiv="Refresh" content="10;url=2bane.html">
[HTML] pobierz, plaintext 

2bane.html

[HTML] pobierz, plaintext 
<meta http-equiv="Refresh" content="10;url=3bane.html">
[HTML] pobierz, plaintext 

3bane.html

[HTML] pobierz, plaintext 
<meta http-equiv="Refresh" content="10;url=1bane.html">
[HTML] pobierz, plaintext 

Ps Wiem, że to nie jest mądre rozwiązanie ale jakieś jest. ;p

Ten post edytował ShadowD 26.06.2008, 16:26:39

[lord_t]

ShadowD n/c (IMG:http://forum.php.pl/style_emoticons/default/blinksmiley.gif)

basu łap i analizuj:

[HTML] pobierz, plaintext 
<script type="text/javascript">
<!--
$('document').ready(function(){
pokaz(1,3);
});
 
function pokaz(i,j){
  i=i%3+2;
  $("#banner_right_"+j).fadeOut();
  $("#banner_right_"+(i-1)).fadeIn();
  setTimeout("pokaz("+i+","+(i-1)+")",10000);
}
//-->
</script>
 
<style type="text/css">
/* <![CDATA[ */
#banner_right_1{ 
background:#dda;
width:400px;
display:none;
}
#banner_right_2{ 
background:#cfa;
width:400px;
display:none;
}
#banner_right_3{ 
background:#aaa;
width:400px;
display:none;
}
 
/* ]]> */
</style>
[HTML] pobierz, plaintext 

Ten post edytował lord_t 26.06.2008, 16:35:18

[basu]

To jest to! dzieki wielkie. (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Jest tylko 1 maly problem: obrazek 2 i 3 pokazuja sie przez chwile w tym samym momencie co rozwala mi przez sekunde caly ukad strony?
Dzieje sie to gdy div 3 ma fadeout a 2 fadein?

[HTML] pobierz, plaintext 
#banner_right {
	background-color: #1b8cc8;
	background-image: url(gfx/home_banner_pic_1.jpg);
	background-repeat: no-repeat;
	width: 606px;
	height: 217px;
	float: left;
}
 
#banner_right_1 {
	background-color: #1b8cc8;
	background-image: url(gfx/home_banner_pic_1.jpg);
	background-repeat: no-repeat;
	width: 606px;
	height: 217px;
	float: left;
	display: none;
}
 
#banner_right_2 {
	background-image: url(gfx/home_banner_pic_2.jpg);
	background-repeat: no-repeat;
	width: 606px;
	height: 217px;
	display: none;
}
 
#banner_right_3 {
	background-image: url(gfx/home_banner_pic_3.jpg);
	background-repeat: no-repeat;
	width: 606px;
	display: none;
	height: 217px;
}
[HTML] pobierz, plaintext 

OK juz dziala - position: absolute (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował basu 27.06.2008, 13:56:51

[lord_t]

To może trzeba zamiast fade-ów zastosować przezroczystość (opacity). Masz 3 divy wszystkie w tym samym miejscu (position absolute?) i zmyślnie manewrujesz właśnie przezroczystością (może też z-indexem).

Możesz też obczaić show i hide. Wyszło ciekawie:)

[HTML] pobierz, plaintext 
<script type="text/javascript">
<!--
$('document').ready(function(){
pokaz(1,3);
});
 
function pokaz(i,j){
  i=i%3+2;
  $("#banner_right_"+j).hide('slow');//alert('$("#banner_right_"'+(i-1)+').fadeIn()');
  $("#banner_right_"+(i-1)).show('slow');//',400);
  setTimeout("pokaz("+i+","+(i-1)+")",2000);
}
//-->
</script>
 
<style type="text/css">
/* <![CDATA[ */
#banner_right_1{ 
background:#dda;
width:400px;
display:none;
}
#banner_right_2{ 
background:#cfa;
width:400px;
display:none;
}
#banner_right_3{ 
background:#aaa;
width:400px;
display:none;
}
 
#banner_right{
 height:10;
 border:black solid 1px;
}
/* ]]> */
</style>
 
 
 
<div id="banner_right">
<div id="banner_right_1">x</div>
<div id="banner_right_2">x</div>
<div id="banner_right_3">x</div>
</div>
[HTML] pobierz, plaintext 

[basu]

zrobilem cos takiego i dziala super:

[PHP] pobierz, plaintext 
<?php
$('document').ready(function(){
	show(1,6);	
});
 
function show(i,j){
 
	$("#div"+j).fadeOut();
	j=j+1; if( j>6 ) j=1;
 
		$("#div"+i).fadeIn();
	i=i+1; if( i>6 ) i=1;
 
	setTimeout("show("+i+","+j+")",4000);
}
?>
[PHP] pobierz, plaintext 

Teraz potrzebuje dodac zdarzenie hover(). Tzn zdjecia sie zmieniaja, ale jak najade myszka na zdjecie, to sie zatrzyma. Wiem ze jest zdarzenie hover, ale za kazdym razem nie wychodzi tak jak powinno byc. Jakies sugestie?

[lord_t]

Łap basu:

-styl i js na których testowałem:

[HTML] pobierz, plaintext 
<style type="text/css">
 
div{width:520px; height:70px;display:none;position:absolute}
#div1{background: red;}
#div2{background: blue;}
#div3{background: gray;}
#div4{background: yellow;}
#div5{background: purple;}
#div6{background: green;display:block;}
 
</style>
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript">
 
$('document').ready(function(){
    b=true;
    $('div').hover(function(){b=false;},function(){b=true;});
    show(1,6);
});
 
function show(i,j){
 
  if(b)
    {
    $("#div"+j).fadeOut();
    j=j+1; if( j>6 ) j=1;
 
        $("#div"+i).fadeIn();
    i=i+1; if( i>6 ) i=1;
    }
 
    setTimeout("show("+i+","+j+")",1000);
}
 
</script>
[HTML] pobierz, plaintext 

-divy na których testowałem

[HTML] pobierz, plaintext 
<div id='div1'>11</div>
<div id='div2'>22</div>
<div id='div3'>33</div>
<div id='div4'>44</div>
<div id='div5'>55</div>
<div id='div6'>66</div>
[HTML] pobierz, plaintext