To montando um site, e na home coloquei um slide que peguei na net, só que eu queria que esse slide mudasse automaticamente, ele só muda se clica nos retangulos correspondente as fotos, segue print:
E segue o code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0045)http://www.dhteumeuleu.com/dhtml/diapo-S.html -->
<HTML><HEAD><TITLE>stippled memories - Interactive DHTML demos</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="Gerard Ferrandez at http://www.dhteumeuleu.com" name=Author>
<META http-equiv=imagetoolbar content=no>
<STYLE type=text/css>HTML {
OVERFLOW: hidden
}
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-COLOR: #FFF; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 0px; POSITION: absolute; HEIGHT: 100%
}
#diapo {
BACKGROUND: transparent; LEFT: 0%; OVERFLOW: hidden; WIDTH: 100%; POSITION: absolute; TOP: 0%; HEIGHT: 80%
}
#slider {
WIDTH: 100%; POSITION: absolute; HEIGHT: 80%
}
#slider IMG {
FILTER: alpha(opacity=40); -MS-INTERPOLATION-MODE: nearest-neighbor; VISIBILITY: hidden; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; POSITION: absolute; BORDER-BOTTOM-STYLE: none; opacity: 0.4
}
#button {
OVERFLOW: hidden; POSITION: absolute
}
#legend {
BACKGROUND: #111; FONT-FAMILY: arial, helvetica, verdana, sans-serif; POSITION: absolute
}
#button SPAN {
POSITION: absolute; HEIGHT: 100%
}
#button SPAN:hover {
BACKGROUND: #900
}
.loaded {
BACKGROUND: #666; CURSOR: pointer
}
.selected {
BACKGROUND: #900
}
#title {
FLOAT:; MARGIN-LEFT: 0.5em; COLOR: #fff
}
#txt {
FLOAT: left; MARGIN-LEFT: 0.5em; COLOR: #BFBFBF;
}
</STYLE>
<script type=text/javascript>
/* ==================================================================================
===== DHTML slide show =====
script by Gerard Ferrandez - ge1doot - April 10th, 2006
http://www.dhteumeuleu.com
================================================================================== */
id = function(o){return document.getElementById(o);}
position = function(o, css){for(var i in css)o.style[i]=Math.round(css[i])+'px';}
setOpacity = function(o,alpha){
if(o.filters)o.filters.alpha.opacity = alpha*100;
else o.style.opacity = alpha;
}
diapo = {
N:0,
W:0,
H:0,
///////////////////
image_ratio:4/3,
fsTitle:16,
fsText:8,
imgMargin:3,
butMargin:3,
///////////////////
ims:0,
imx:[],
tit:[],
txt:[],
thu:0,
pos:0,
xc:0,
xd:0,
xm:0,
dt:0,
xs:0,
move:false,
slide:function(){
with(this){
// ===== scrolling loop =====
xm += xs;
xc += (dt*xm*.0025);
id("slider").style.left = Math.round(xc)+"px";
if (xm == 20) xs = -1;
if (xm) setTimeout("diapo.slide();", 16);
else {
// ===== enlighten pic =====
for(var i=.5;i<=1;i+=.1)setTimeout("setOpacity(diapo.ims[diapo.pos], "+i+")", 160*i);
setTimeout("diapo.move=false", 160);
}
}
},
cxd:function(p){
with(this){
// ===== calculates slider position =====
if(W/H>image_ratio){
wi = Math.round(H*(ims[p].width/ims[p].height));
xd = -imx[p]+((W-wi)/2);
} else xd = -imx[p];
// ===== display text =====
thu[p].className = "selected";
id("title").innerHTML = tit[p];
id("txt").innerHTML = txt[p];
}
},
scroll:function(p){
with(this){
if(move){
// ===== already scrolling: queue event =====
setTimeout("diapo.scroll("+p+");", 128);
} else {
if(thu[p].className == "loaded"){
// ===== start scrolling =====
cxd(p);
setOpacity(ims[pos], .4);
thu[pos].className = "loaded";
pos = p;
dt = xd-xc;
xm = 0;
xs = 1;
move = true;
slide();
}
}
}
},
pos_button:function(x,y,w){
with(this){
// ===== button bar & text positioning =====
position(id("button"), {'left':x,'top':y+butMargin,'width':w,'height':H/20});
position(id("legend"), {'left':x,'top':y+(butMargin*2)+H/20,'width':w,'height':H});
position(id("title"), {'fontSize':Math.max(13,H/(250/fsTitle))});
position(id("txt"), {'fontSize':Math.max(10,H/(250/fsText)),'marginTop':.5*H/(250/fsText)});
thu = id("button").getElementsByTagName("span");
for(var i=0;i<N;i++){
var wi = Math.round(w/N)-butMargin;
position(thu[i], {'left':(butMargin*.5)+i*(wi+butMargin),'width':wi});
if(ims[i].complete)thu[i].className = (i==pos)?"selected":"loaded";
}
}
},
resize:function(){
with(diapo){
// ===== resize layout =====
W=id("slider").offsetWidth;
H=id("slider").offsetHeight;
var w=0;
var h=0;
var x=0;
for(var i=0;i<N;i++){
if(ims[i].complete){
w=ims[i].width;
h=ims[i].height;
ims[i].style.visibility="visible";
setOpacity(ims[i], (i==pos)?1:.4);
if(W/H>image_ratio){
// ===== horizontal centering =====
wi = Math.round(H*(w/h));
position(ims[i], {'left':x,'top':0,'width':wi,'height':H});
imx[i] = x;
x += wi+imgMargin;
if(i==0) pos_button((W-wi)/2,H,wi);
} else {
// ===== vertical centering =====
hi = Math.round(W/(w/h));
position(ims[i], {'left':x,'top':(H-hi)/2,'width':W,'height':hi});
imx[i] = x;
x += W+imgMargin;
if(i==0) pos_button(0,hi+(H-hi)/2,W);
}
}
if(xs==0)xc=xd;
}
// ===== reajust scroll position =====
if(!move){
cxd(pos);
position(id("slider"), {'left':xd});
}
}
},
images_load:function(){
with(this){
// ===== loop until all images are loaded =====
var M=0;
for(var i=0;i<N;i++) if(ims[i].complete) M++;
if(!move && ims[0].complete) resize();
if(M<N || move) setTimeout("diapo.images_load();", 128);
}
},
init:function(){
with(this){
// ===== images source =====
ims = id("slider").getElementsByTagName("img");
N = ims.length;
// ===== create buttons =====
for(var i=0;i<N;i++) {
o = document.createElement("span");
tit[i] = ims[i].title;
txt[i] = ims[i].alt;
ims[i].title = "";
ims[i].alt = "";
o.onmousedown = new Function("diapo.scroll("+i+");");
id("button").appendChild(o);
}
images_load();
}
}
}
</SCRIPT>
<META content="MSHTML 6.00.6000.16762" name=GENERATOR></HEAD>
<BODY>
<div id=diapo>
<DIV id=slider>
<a href="http://www.shiftedreality.com/" target=_blank>
<img title="Decoração" alt="Cliente: CVC Viagens" src="img/slideindex/foto01.jpg"></A>
<img title="Outdoor" alt="Cliente: CVC Viagens" src="img/slideindex/foto02.jpg">
<img title="Fachadas" alt="Cliente: Ivani Artes" src="img/slideindex/foto03.jpg">
<img title="Letra Caixa" alt="Cliente: Óptica Planeta" src="img/slideindex/foto04.jpg">
<img title="Fachadas" alt="Cliente: MÁ Presentes" src="img/slideindex/foto05.jpg">
<img title="Personalização de Frota" alt="Cliente: Sisam Segurança" src="img/slideindex/foto06.jpg">
<img title="Letra Caixa" alt="Cliente: Vicentini" src="img/slideindex/foto07.jpg">
<img title="Personalização de Frota" alt="Cliente: Auto Escola Vitória" src="img/slideindex/foto08.jpg">
<img title="Decoração" alt="Cliente: CVC Viagens" src="img/slideindex/foto09.jpg">
<img title="Outdoor" alt="Cliente: Planeta Turismo" src="img/slideindex/foto10.jpg">
</DIV>
<DIV id=button></DIV>
<DIV id=legend><SPAN id=title></SPAN><SPAN id=txt></SPAN></DIV></DIV>
<script type=text/javascript>
// ===== start script while loading images =====
function dom_onload() {
if(id("slider")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();
// ===== window resize event =====
onresize = diapo.resize;
// ================================================
</SCRIPT>
</BODY></HTML>Obrigado quem ajudar, to precisando meio urgentinho ;D
