[Resolvido] Botão prev não funciona no Slideshow
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">](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/"](http://www.pattyvalente.com/) />
</div>
<div class="slide">
<img src="produtosslider.jpg" alt="Penteados" longdesc="[http://www.pattyvalente.com/"](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>Discussão (3)
Carregando comentários...