Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

CatarinaValente

[Resolvido] Botão prev não funciona no Slideshow

Por , em Javascript

Recommended Posts

CatarinaValente    0

CatarinaValente
Postado

Olá!

Estou começando nisso de jquery e precisei criar um slideshow. Tem vários exemplos na net e acabei encontrei um que servia para o projecto. Mas apesar dele funcionar bem na hora de rodar os slides, o botão prev não funciona, nada acontece quando clico nele e não sei aonde está o erro. Será que me poderiam ajudar a perceber?

 

Muito Obrigada!

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="folha.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	background-image:url(background.jpg);
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-repeat: repeat-x;
}
a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: underline;
	color: #FFFFFF;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
<!--
/*
 
 Slideshow style rules.
 */
#slideshow {
	margin:0 auto;
	width:851px;
	height:247px;
	background: url(slider2.jpg) no-repeat 0 0;
	position:relative;
}
#slideshow #slidesContainer {
  	margin:0 auto;
  	width:851px;
  	height:247px;
  	overflow:auto; /* allow scrollbar */
  	position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:831px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:247px;
}
 
/*
 
 
 Slideshow controls style rules.
 */
.control {
  display:block;
  width:86px;
  height:247px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(setaesquerda.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(setadireita.jpg) no-repeat 0 0;
}
-->
</style>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 851;
  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')
    .prepend('<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>
</head>

<body>
<div id="Geral">

<div id="topo"></div>


<div id="barramenu">
<div id="MENU">
<ul id="MENU">
<li><a href="home.html" target="iframe1">HOME</a></li>
<li><a href="servicos.html" target="iframe1">SERVIÇOS</a></li>
<li><a href="corina.html" target="iframe1">CORINA</a></li>
<li><a href="produtos.html" target="iframe1">PRODUTOS</a></li>
<li><a href="localizaçao.html" target="iframe1">LOCALIZAÇÃO</a></li>
<li><a href="contactos.html" target="iframe1">CONTACTOS</a></li>

</ul>
</div>
</div>
<div id="slideshow">
  <div id="slidesContainer">
    <div class="slide">
        <img src="produtosslider.jpg" alt="Produtos" longdesc="http://www.pattyvalente.com/" />

    </div>
    <div class="slide">
     <img src="produtosslider.jpg" alt="Penteados" longdesc="http://www.pattyvalente.com/" />
    </div>
    <div class="slide">
      <!-- Content for slide 3 goes here. -->
    </div>
    <div class="slide">
      <!-- Content for slide 4 goes here. -->
    </div>
  </div>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Eu não entendi bem.. e é bem dificil arrumar scritps assim...

existem alguns erros no teu documento, como duplicar id:

<div id="MENU">
<ul id="MENU">
... se tiver como postar um link para o site, para vermos o problema ocorrendo, talvez fique mais fácil te ajudar.

 

no link de onde você pegou esse slide não tem nada a respeito ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

CatarinaValente    0

CatarinaValente
Postado

Olá William! Obrigada por tentar me ajudar!

Eu peguei o código aqui neste site e tenho seguido tudo direitinho.

 

O que estou fazendo ainda não está online mas não funfa nem no IE e nem no FF. O slide funciona apenas a seta direita, a esquerda não dá nada e os slides ainda passam por cima da mesma :( .

 

Quanto ao erro que você mencionou eu já havia corrigido :) foi uma pequena distração.

De todas as formas, se você puder me ajudar, eu agradeço imenso :)

Cumps,

Cathy

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito