Slide de imagens que troca de imagem a cada x segundos

biza · Agosto 7, 2010

Boas, será que alguém me pode ensinar a criar um slide de imagem em javascript, eu criei uma slide mas este não fica rodando!... Deve entrar em conflito com ligthbox...

Ted k' · Agosto 7, 2010

entao mostra o codigo de como criou tudo... melhor para ajudar!

biza · Agosto 7, 2010

<head>

$(document).ready(function() {

//Execute the slideShow

slideShow();

});

function slideShow() {

//Set the opacity of all images to 0

$('#gallery span').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)

$('#gallery span:first').css({opacity: 1.0});

//Set the caption background to semi-transparent

$('#gallery .caption').css({opacity: 0.7});

//Resize the width of the caption according to the image width

$('#gallery .caption').css({width: $('#gallery span').find('img').css('width')});

//Get the caption of the first image from REL attribute and display it

$('#gallery .content').html($('#gallery span:first').find('img').attr('rel'))

.animate({opacity: 0.7}, 400);

//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds

setInterval('gallery()',6000);

}

function gallery() {

//if no IMGs have the show class, grab the first image

var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image

var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));

//Get next image caption

var caption = next.find('img').attr('rel');

//Set the fade in effect for the next image, show class has higher z-index

next.css({opacity: 0.0})

.addClass('show')

.animate({opacity: 1.0}, 1000);

//Hide the current image

current.animate({opacity: 0.0}, 1000)

.removeClass('show');

//Set the opacity to 0 and height to 1px

$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });

//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect

$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );

//Display the content

$('#gallery .content').html(caption);

}

</script>

<?

$dir ="cars/";

$sql= "SELECT DISTINCT viaturas.id, viaturas.cat_id, viaturas.modelo, viaturas.preco, viaturas.quilometros, viaturas.cilindrada, viaturas.cor_car, viaturas.cor_int, viaturas.data, viaturas.ano, viaturas.portas, viaturas.potencia, viaturas.imagem1, viaturas.imagem2, viaturas.imagem3, viaturas.imagem4, viaturas.imagem5, viaturas.imagem6, viaturas.imagem7, viaturas.imagem8, viaturas.observacoes, categorias.cat, combustivel.combustivel, marcas.marca FROM viaturas, categorias, combustivel, marcas WHERE viaturas.cat_id = categorias.t_id AND viaturas.id_combustivel = combustivel.c_id AND viaturas.id_marca = marcas.m_id AND id=".$_GET['id'] or die(mysql_error());

$result1 = mysql_query($sql) or die('Query failed: ' . mysql_error());

while($linha = mysql_fetch_array($result1))

{

echo'<div class="news" id="espaco">'.$linha["marca"].' '.$linha["modelo"].' '.$linha["potencia"].'</div>

<div class="news" id="post_ti">Geral</div>

<tr>

</tr>

<tr>

<td width="51%" class="items_es"><p>Modelo:</p></td>

<td width="49%" class="contactos">'.$linha["modelo"].'</td>

</tr>

<tr>

</tr>

<tr>

<td class="items_es">Quilometros:</td>

<td class="contactos">'.$linha["quilometros"].'</td>

</tr>

<tr>

</tr>

<tr>

<td class="items_es">Cilindrada:</td>

<td class="contactos">'.$linha["cilindrada"].'</td>

</tr>

<tr>

</tr>

<tr>

<td class="items_es">Cor da Carroçaria:</td>

<td class="contactos">'.$linha["cor_car"].'</td>

</tr>

<tr>

</tr>

<tr>

<td class="items_es">Cor dos interiores:</td>

<td class="contactos">'.$linha["cor_int"].'</td>

</tr>

<tr>

</tr>

<tr>

<td class="items_es">Potencia:</td>

<td class="contactos">'.$linha["potencia"].'</td>

</tr>

<tr>

</tr>

<tr>

<td class="items_es">Portas:</td>

<td class="contactos">'.$linha["portas"].'</td>

</tr>

<tr>

</tr>

<tr>

<td class="contactos">'.$linha["ano"].'</td>

</tr>

<tr>

</tr>

<tr>

<td class="items_es">Preço:</td>

<td class="contactos">'.$linha["preco"].'(€)</td>

</tr>

<tr>

</tr>

<tr>

<td class="items_es">Data Inserção Viatura:</td>

<td class="contactos">'.$linha["data"].'</td>

</tr>

</table>

</div>

</span>

</span>

</span>

</span>

</span>

</span>

</span>

</span>

</div>

</div>

<h1 class="tab" title="title for page 1">Som, Multimédia e Navegação</h1>

<div id="espa">';

$sql="SELECT equipamento.equipa FROM equipamento JOIN viatura_equipa ON equipamento.id = viatura_equipa.equipamento_id JOIN viaturas ON viaturas.id=viatura_equipa.viatura_id WHERE equipamento.estado ='1' AND viaturas.id=".$_GET['id'];

$result2 = mysql_query($sql) or die('Query failed: ' . mysql_error());

while($row2 = mysql_fetch_array($result2))

{

echo' <div id="espacamento" class="alinhame">'.$row2['equipa'].'</div>

';

}

echo'</div>

</div>

<h1 class="tab" title="title for page 2">Segurança e Performance</h1>

<div id="espa"> ';

$sql="SELECT equipamento.equipa FROM equipamento JOIN viatura_equipa ON equipamento.id = viatura_equipa.equipamento_id JOIN viaturas ON viaturas.id=viatura_equipa.viatura_id WHERE equipamento.estado ='2' AND viaturas.id=".$_GET['id'];

$result3 = mysql_query($sql) or die('Query failed: ' . mysql_error());

while($row3 = mysql_fetch_array($result3))

{

echo' <div id="espacamento" class="alinhame">'.$row3['equipa'].'</div>';

}

echo' </div>

</div>

<h1 class="tab" title="title for page 3">Interior e Conforto</h1>

<div id="espa">';

$sql="SELECT equipamento.equipa FROM equipamento JOIN viatura_equipa ON equipamento.id = viatura_equipa.equipamento_id JOIN viaturas ON viaturas.id=viatura_equipa.viatura_id WHERE equipamento.estado ='3' AND viaturas.id=".$_GET['id'];

$result4 = mysql_query($sql) or die('Query failed: ' . mysql_error());

while($row4 = mysql_fetch_array($result4))

{

echo' <div id="espacamento" class="alinhame">'.$row4['equipa'].'</div>';

}

echo' </table>

</div>

<h1 class="tab" title="title for page 3">Exterior e Ambiente</h1>

<div id="espa">';

$sql="SELECT equipamento.equipa FROM equipamento JOIN viatura_equipa ON equipamento.id = viatura_equipa.equipamento_id JOIN viaturas ON viaturas.id=viatura_equipa.viatura_id WHERE equipamento.estado ='4' AND viaturas.id=".$_GET['id'];

$result5 = mysql_query($sql) or die('Query failed: ' . mysql_error());

while($row5 = mysql_fetch_array($result5))

{

echo' <div id="espacamento" class="alinhame">'.$row5['equipa'].'</div>';

}

echo'</div>

</div>

<div class="t_car" id="espaco3">Observações</div>

<div id="texto2" class="gray">'.$linha["observacoes"].'</div>

</div>';}

?>

</div>

</body>

Entrar

Arquivado

Slide de imagens que troca de imagem a cada x segundos

Recommended Posts

biza 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ted k' 126

Compartilhar este post

Link para o post

Compartilhar em outros sites

biza 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante