Moderador: web
 por gabrielfontenele Offline » Dom Jan 23, 2011 11:43 am
|
Olá galera do códigosnaweb, eu vim postar um código de slide bem bacana e aproveitar para tirar uma dúvida. É o seguinte, como eu faço para a exibição de imagens começar sozinha e como eu faço para colocar um hiperlink para cada imagem do slide.
- Código: Selecionar todos
<head>
<title>SLIDE</title>
<link href="slide.css" rel="stylesheet">
<script language="JavaScript" type="text/JavaScript">
function MM_preloadImages() {
var d=document;
if(d.images) {
if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){
d.MM_p[j]=new Image;
d.MM_p[j++].src=a[i];
}
}
}
</script>
</head>
<body onLoad="MM_preloadImages('01.PNG','02.PNG','03.PNG','04.PNG','05.PNG')" bgcolor="#000000">
<script type="text/javascript">
window.onload = function() {
imagens = new Image();
imagens.src="01.PNG";
imagens.src="02.PNG";
imagens.src="03.PNG";
imagens.src="04.PNG";
imagens.src="05.PNG";
}
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
function blendimage(divid, imageid, imagefile, millisec) {
var speed = Math.round (millisec / 100);
var timer = 0;
document.getElementById (divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
changeOpac(0, imageid);
document.getElementById(imageid).src = imagefile;
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
timer++;
}
}
</script>
<div class="div_carrega" id="blenddiv" style="width: 523px; height: 150px">
<img class="div_img" id="blendimage" width="200" height="91" style="width: 550px; height: 150px"></div>
<div style="position: absolute; width: 9px; height: 63px; z-index: 1; left: 533px; top: 16px" id="camada1">
<table width="18" border="0" cellpadding="0" cellspacing="0" height="94">
<tr>
<td width="103" height="18">
<p align="center">
<a href="javascript:blendimage('blenddiv','blendimage', '01.PNG',500)">
<font size="2">01</font></a></td>
</tr>
<tr>
<td width="103" height="2">
<p align="center"><font size="2">
<img border="0" src="imagens/gr_espaço.gif" width="2" height="2"></font></td>
</tr>
<tr>
<td width="103" height="20">
<p align="center">
<a href="javascript:blendimage('blenddiv','blendimage', '02.PNG',500)">
<font size="2">02</font></a></td>
</tr>
<tr>
<td width="103" height="2">
<p align="center"><font size="2">
<img border="0" src="imagens/gr_espaço.gif" width="2" height="2"></font></td>
</tr>
<tr>
<td width="103" height="16">
<p align="center">
<a href="javascript:blendimage('blenddiv','blendimage', '03.PNG',500)">
<font size="2">03</font></a></td>
</tr>
<tr>
<td width="103" height="2">
<p align="center"><font size="2">
<img border="0" src="imagens/gr_espaço.gif" width="2" height="2"></font></td>
</tr>
<tr>
<td width="103" height="16">
<p align="center">
<a href="javascript:blendimage('blenddiv','blendimage', '04.PNG',500)">
<font size="2">04</font></a></td>
</tr>
<tr>
<td width="103" height="2">
<p align="center"><font size="2">
<img border="0" src="imagens/gr_espaço.gif" width="2" height="2"></font></td>
</tr>
<tr>
<td width="103" height="16">
<p align="center">
<a href="javascript:blendimage('blenddiv','blendimage', '05.PNG',500)">
<font size="2">05</font></a></td>
</tr>
</table>
</div>
</body>
</html>
gabrielfontenele
NOVO MEMBRO
Mensagens: 3
Registrado em: Ter Dez 14, 2010 8:54 pm
|
por web Offline » Dom Jan 23, 2011 12:41 pm
Tem scripts já pronto na net que fazem isso. Um exemplo está no link abaixo
http://www.sohtanaka.com/web-design/aut ... ss-jquery/
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12407
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por Joao soares Offline » Seg Jul 25, 2011 3:18 pm
muito bom ! 
Joao soares
NOVO MEMBRO
Mensagens: 3
Registrado em: Seg Jul 25, 2011 3:10 pm
|
por erivelton42 Offline » Ter Jul 26, 2011 4:02 pm
Bom amigo, uso o Nivo Slider, ele e muito bom, e tem algumas funções para personalizar no arqivo js dele, se quiser conferir e so acessar: http://nivo.dev7studios.com/
www.radiokiller.com.br
erivelton42
SUPER ATIVO
Mensagens: 81
Registrado em: Ter Jul 19, 2011 6:29 pm
Localização: Apuiarés - CE
|
por web Offline » Ter Jul 26, 2011 4:04 pm
Esse Nivo Slider é muito prático, já indiquei também.
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12407
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
Voltar para JavaScript, jQuery, CSS e HTML
Quem está online
Usuários navegando neste fórum: Nenhum usuário registrado e 1 visitante
|
|
|
