прост слайдер

[dobrinrusev]

Здравейте леб туристи
Бихте ли ми помогнали с един javascript.
Бихте ли ми помогнали със скрипт ,който да сменя 3 картинки през 15 секунди.

 

[smoke]

не съм много напред с Js-а но трябва да е нещо такова само незнам как да го направя като не престанен цикъл но така се въртят трите и накрая показва първата снимка и спира ако те устройва:

<script type="text/javascript">
	$(function(){
		$(".second").hide();
		$(".three").hide();
		
		setTimeout('$(".first").hide(); $(".second").show();', 15000);
		setTimeout('$(".second").hide(); $(".three").show();', 30000);
		setTimeout('$(".three").hide(); $(".first").show();', 45000);
	});
</script>

<div id="img">
	<img src="pat do snimka 1" class="first" /> 
	<img src="pat do snimka 2" class="second" /> 
	<img src="pat do snimka 3" class="three" /> 
</div>

 

[amgcompany]

[js]window.onload = nextIMG;
var kartinki = new Array("pics/1.jpg","pics/2.gif","pics/3.jpg");//тук задаваш пътя до картинките
var tekushta = 0;
function nextIMG()
{
tekushta++;
if(kartinki.length == tekushta)
{
tekushta = 0;
}

document.getElementById("slide_im").src = kartinki[tekushta];

setTimeout("nextIMG()", 15000);


}


[/js]
HTML:

<body>
		<noscript>Turn On the JS</noscript>
		<div id="slide">
			<br/><br/><br/>
			<img src="pics/1.jpg" id="slide_im" /><br/>

		</div>
	</body>

 

[dobrinrusev]

благодаря за скриптовете !!!
Ще може ли картинките да се сменят с някакъв fadeIn fadeOut ефект и как ще стане това.

 

[adrian]

http://nivo.dev7studios.com/

просто му задаваш pauseTime: 15000, ефекти за смяна на слайдовете има колкото искаш:

sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse

 

[dobrinrusev]

това последното не го разбрах ще ми дадете ли пример

 

[adrian]

http://nivo.dev7studios.com/#usage

 

[dobrinrusev]

ОК използвах кодовете които ми писахте и импровизирах с се получи слайдерът който исках

[js]<script type="text/javascript">
window.onload = nextIMG;
var kartinki = new Array("images/homepic3.jpg","images/homepic1.jpg","images/homepic2.jpg");
var tekushta = 0;
function nextIMG()
{
$('#banner').fadeIn('slow');
tekushta++;
if(kartinki.length == tekushta)
{
tekushta = 0;
}
document.getElementById("slide_im").src = kartinki[tekushta];
setTimeout("$('#banner').fadeOut(1000, nextIMG);", 5000 );
}
</script>[/js]
Има обаче нещо което ме дразни - Всеки път когато се сменят картинките
и страницата отива най-отгоре.Как да избегна това?

 

[amgcompany]

Еми пробвай на дива който е със картинките да му зададеш някаква позиция със css.Примерно:
[css]
#kartinki
{
margin:0 auto;
}[/css]

 

[dobrinrusev]

Порбвах така ама не стана.
Някакви други предложения?
Може вместо setTimeout да се използва друга функция.

 

[amgcompany]

Сега като написах кода видях,че и при мен е същото,този проблем се оправя ако не използваш FadeOut и FadeIn.Кода ти да е само [js]setTimeout("nextIMG()", 5000);[/js]Ама пък така много дървено се сменят снимките

 

[dobrinrusev]

ами така е предпочитам да си остане така отколкото да се сменят дървено