Ir para conteúdo
Fórum CódigoFonte.net
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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Visitante
Responder

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Processando...
Entre para seguir isso  

×
×
  • Criar Novo...