Criar um slideshow de imagens "no braço" não é fácil, mas com JQuery e uma mãozinha do JCycle tudo fica muito fácil vejamos como:
Primeiramente devemos fazer o download das bibliotecas JQuery e JCycle:
JQuery => http://jquery.com/
JCycle => http://jquery.malsup.com/cycle/
Salve os arquivos na raiz do site ou em algum diretório de scripts do site.
Importe as bibliotecas e insira estes códigos entre as tags <HEAD> do site assim:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//#slides é o id da DIV que carregará as imagens
$('#slides').cycle({
//Fade é o efeito de transição das imagens
fx: 'fade',
//É a velocidade do efeito
speed: 1000,
timeout: 7000,
//#thumbs é o id do DIV que carregará os thumbnails
pager: '#thumbs',
//É para parar a transição no evento onmouseover
pause:true,
// Esta parte cria pega as imagens carregadas no #slides e cria o thumbnails
pagerAnchorBuilder: function(idx, slide) {
var img = $(slide).children().eq(0).attr("src");
return '<a href="#"><img src="'+ img +'" width="45px" height="35px" border="0"/></a>';
}
});
});
</script>
Agora no corpo da página é só criar as DIVS e carregar as imagens assim:
<div id="slides" width="400px" height="400px">
<img src="imagem1.jpg" width="398px" height="398px"/>
<img src="imagem2.jpg" width="398px" height="398px"/>
<img src="imagem3.jpg" width="398px" height="398px"/>
<img src="imagem4.jpg" width="398px" height="398px"/>
</div>
<div id="thumbs"></div>
Lembre-se de não alterar os IDs das divs, senão será necessário alterar o código javascript.
Caso queira aplicar alguma regra CSS utilize classes assim: Exemplo: <div id="slides" class="div_slide">
Com um pouco de imaginação dá para melhorar muito este exemplo, mas ainda sim espero que ajude alguém.
Relógio digital com Javascript
Com esta simples função em javascript é possível criar um relógio digital para seu site:
Coloque este código entre as tags HEAD do site:
<script language="JavaScript">
function do_Relogio(){
momentoAtual = new Date()
var hora = momentoAtual.getHours()
if(hora<10) hora = "0"+hora;
var minuto = momentoAtual.getMinutes()
if(minuto<10) minuto = "0"+minuto;
var segundo = momentoAtual.getSeconds()
if(segundo<10) segundo = "0"+segundo;
horaImprimivel = hora + " : " + minuto + " : " + segundo
document.form_relogio.relogio.value = horaImprimivel
setTimeout("do_Relogio()",1000)
}
</script>
Dentro da tag <body> chame a função no evento onload assim:
<body onload="do_Relogio();">
Crie um formulário com o campo que exibirá a hora assim:
<form name="form_relogio" align="center" style="margin:01px; padding:03px;">
<input type="text" name="relogio" size="09" readonly="true" style="color:#339966; font-size:11px;>
</form>
Como podem ver a função javascript captura a data atual date(), extrai dela a hora, os minutos e os segundos e armazena nas variáveis. Após isto cria-se outra variável concatenando as horas, minutos e segundos para ficarem com o formato de horas (00:00:00 ) e atribui-se ao input do form o valor retornado (usamos um input do tipo texto). Com setTimeout fazemos a atualização do valor das variáveis a cada 1000 milisegundos (1s). Muito simples e didático.
Coloque este código entre as tags HEAD do site:
<script language="JavaScript">
function do_Relogio(){
momentoAtual = new Date()
var hora = momentoAtual.getHours()
if(hora<10) hora = "0"+hora;
var minuto = momentoAtual.getMinutes()
if(minuto<10) minuto = "0"+minuto;
var segundo = momentoAtual.getSeconds()
if(segundo<10) segundo = "0"+segundo;
horaImprimivel = hora + " : " + minuto + " : " + segundo
document.form_relogio.relogio.value = horaImprimivel
setTimeout("do_Relogio()",1000)
}
</script>
Dentro da tag <body> chame a função no evento onload assim:
<body onload="do_Relogio();">
Crie um formulário com o campo que exibirá a hora assim:
<form name="form_relogio" align="center" style="margin:01px; padding:03px;">
<input type="text" name="relogio" size="09" readonly="true" style="color:#339966; font-size:11px;>
</form>
Como podem ver a função javascript captura a data atual date(), extrai dela a hora, os minutos e os segundos e armazena nas variáveis. Após isto cria-se outra variável concatenando as horas, minutos e segundos para ficarem com o formato de horas (00:00:00 ) e atribui-se ao input do form o valor retornado (usamos um input do tipo texto). Com setTimeout fazemos a atualização do valor das variáveis a cada 1000 milisegundos (1s). Muito simples e didático.
Maiúsculas e Minúsculas no PHP
O PHP oferece bons recursos para trabalharmos com strings.
Consideremos a seguinte variável string:
$texto = "lorem ipsum tudor";
Para converter todo texto em letras minúsculas usamos o strtolower( );
Ex: strtolower($texto);
Resultado é: "lorem ipsum tudor";
Para converter todo texto em letras maiúsculas usamos o strtoupper( );
Ex: strtoupper($texto);
Resultado é: "LOREM IPSUM TUDOR";
Para converter o primeiro carcter de uma string em maiúsculo usamos o ucfirst( );
Ex: ucfirst($texto);
Resultado é: "Lorem ipsum tudor";
Para converter o primeiro caracter da cada palavra de uma string usamos o ucwords( );
Ex: ucwords($texto);
Resultado é: "Lorem Ipsum Tudor";
Consideremos a seguinte variável string:
$texto = "lorem ipsum tudor";
Para converter todo texto em letras minúsculas usamos o strtolower( );
Ex: strtolower($texto);
Resultado é: "lorem ipsum tudor";
Para converter todo texto em letras maiúsculas usamos o strtoupper( );
Ex: strtoupper($texto);
Resultado é: "LOREM IPSUM TUDOR";
Para converter o primeiro carcter de uma string em maiúsculo usamos o ucfirst( );
Ex: ucfirst($texto);
Resultado é: "Lorem ipsum tudor";
Para converter o primeiro caracter da cada palavra de uma string usamos o ucwords( );
Ex: ucwords($texto);
Resultado é: "Lorem Ipsum Tudor";
Assinar:
Postagens (Atom)