Troca de imagem com o tempo

[LuisG_ 0]

Olá amigos

 

Estou com um probleminha, gostaria da ajuda de vcs

 

Bom... vamos aos códigos:

 

Esse codigo etá inserido na minha pagina php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
 var currentPosition = 0; 
 var slideWidth = 1024; 
 var slides = $('.slide'); 
 var numberOfSlides = slides.length; 

 // Remove scrollbar in JS 
 $('#slidesContainer').css('overflow', 'hidden'); 

 // Wrap all .slides with #slideInner div 
 slides 
   .wrapAll('<div id="slideInner"></div>') 
   // Float left to display horizontally, readjust .slides width 
       .css({ 
     'float' : 'left', 
     'width' : slideWidth 
   }); 

 // Set #slideInner width equal to total width of all slides 
 $('#slideInner').css('width', slideWidth * numberOfSlides); 

 // Insert controls in the DOM 
 $('#slideshow') 
   .append('<span class="control" id="leftControl">Clicking moves left</span>') 
   .append('<span class="control" id="rightControl">Clicking moves right</span>'); 

 // Hide left arrow control on first load 
 manageControls(currentPosition); 

 // Create event listeners for .controls clicks 
 $('.control') 
   .bind('click', function(){ 
   // Determine new position 
       currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1; 

       // Hide / show controls 
   manageControls(currentPosition); 
   // Move slideInner using margin-left 
   $('#slideInner').animate({ 
     'marginLeft' : slideWidth*(-currentPosition) 
   }); 
 }); 

 // manageControls: Hides and Shows controls depending on currentPosition 
 function manageControls(position){ 
   // Hide left arrow if position is first slide 
       if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() } 
       // Hide right arrow if position is last slide 
   if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() } 
 }      
}); 
</script>

 

e aqui está o css caso necessario:

#slideshow{ 
position:relative; 
width:1024px; 
height:276px; 
margin:0px auto; 
} 

#slidesContainer{ 
position:relative; 
width:1024px; 
height:276px; 
} 

.control { 
 display:block; 
 width:20px; 
 height:276px; 
 text-indent:-10000px; 
 position:absolute; 
 cursor: pointer; 
} 

.slide{ 
float:right; 
} 

#leftControl { 
 top:0; 
 left:0; 
 background:transparent url(../images/controlador_esquerdo.png) no-repeat 0 0; 
} 
#rightControl { 
 top:0; 
 right:0; 
 background:transparent url(../images/controlador_direito.png) no-repeat 0 0; 
}

 

Tudo isso faz funcionar uma especie de banner q ao clicar na seta direita ou esquerda a imagem "corre" e entra a outra imagem logo em seguida, porem, para passar a imagem deve-se clicar na seta da direita ou da esquerda, gostaria de saber se tem como modificar o código a cima para que essas imagens passem sem que o usuario tenha que clicar nas setas ( gostaria de mesmo assim manter o controle do usuario, mantendo as setas direita e esqueda)

 

Conto com a ajuda de todos

 

Grato pela atenção!

[William Bruno 1501]

pesquise pelo jQuery Cycle (plugin)

ele tem essa opção que você quer.

 

porém, se você quiser desenvolver 'na mão'.

com um setTimeout() recursivo ou com um setInterval() você consegue.

[LuisG_ 0]

Olá William,

 

Bom dei uma olhada aqui no jQuery Cycle e o que eu preciso seria mesmo adicionar a esse código(a cima) o fade desse jQuery Cycle ou até mesmo tornar a passagem de imagens automática, o problema é que eu não tenho idéia de como modificar isso em cima desse código, sou principiante em javascript e meus conhecimentos ainda n chegou a esse nível rsrs!

 

Se tiver alguma idéia agradeço

 

Desde já grato pela atenção.

[Estevao Acioli CE 0]

Mais é que se faz isto?