Ir para conteúdo
Fórum CódigoFonte.net
  • Anúncios

    • codigofonte

      Novo Fórum

      Pessoal, Atualizamos nossa versão do fórum para a mais recente da Invision Power. Como tínhamos uma versão muito antiga, talvez algumas áreas possam funcionar de forma errada ou com problemas, gostaria de pedir-lhes a compreensão, pois iremos resolvendo aos poucos. Até mais!
Entre para seguir isso  
LuisG_

Passar Imagens

Recommended Posts

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Entre para seguir isso  

×