Slide em Javascript ~ Brunoperfectt10

Demonstração:

<div id="photoslide">
 <img src="http://www.alejandromoraga.com.br/wp-content/uploads/2010/11/sun.jpg"/>
 <img src="http://www.alejandromoraga.com.br/wp-content/uploads/2010/11/galaxy.jpg"/>
 <img src="http://www.alejandromoraga.com.br/wp-content/uploads/2010/11/popcorn.jpg"/>
</div>

<script type="text/javascript">
window.onload = function() {
 photoslide(document.getElementById("photoslide"));
}
</script>

Passo-a-passo

1. Crie uma div com id, largura, altura e overflow. É importante que a largura e altura da div e imagens sejam iguais.

<div id="photoslide" style="width:500px; height:300px; overflow:hidden;"></div>

2. Insira as imagens na div.

<div id="photoslide" style="width:500px; height:300px; overflow:hidden;">
 <img src="http://www.alejandromoraga.com.br/wp-content/uploads/2010/11/sun.jpg"/>
 <img src="http://www.alejandromoraga.com.br/wp-content/uploads/2010/11/galaxy.jpg"/>
 <img src="http://www.alejandromoraga.com.br/wp-content/uploads/2010/11/popcorn.jpg"/>
</div>

 3. Importe e execute o Javascript.

<script type="text/javascript" src="photoslide.js"></script>
<script type="text/javascript">photoslide(document.getElementById("photoslide"));</script>

Pronto! O slide de imagens está terminado.

Aparência

A aparência dos botões pode ser customizada.

background: Cor de fundo: #FFF
color: Cor do texto: #A8A8A8
font: Definição da fonte do texto: bold 20px verdana
textLeft: Texto do botão esquerdo: <
textRight: Texto do botão direito: >
top: Posicionamento vertical dos botões em base ao topo: 85%
width: Largura dos botões: 30px

Exemplo:

 photoslide(document.getElementById("fotos"), {
 background: "#666",
 color: "#EFEFEF",
 font: "bold 18px Arial",
 textLeft: "prev",
 textRight: "next",
 top: "30px",
 width: "60px"
});

Bug

Em algumas versões do Internet Explorer aparece um espaço entre as imagens. Para evitar que isso aconteça não separe as tags com espaços, deixe-as todas unidas lado a lado.

Exemplo:

Código fonte (download )

/** * @param object a Objeto HTML * @param object btn Configuração dos botões avançar e retroceder */ function photoslide(a, btn) { var img = a.getElementsByTagName("img"), def = { background: "#FFF", color: "#A8A8A8", font: "bold 20px verdana", textLeft: "<", textRight: ">", top: "85%", width: "30px" }; if (btn) for (k in btn) def[k] = btn[k]; if (!(wdt = parseInt(a.style.width.replace("px", "")))) { wdt = img[0].width; a.style.width = wdt + "px"; } if (!(hgt = parseInt(a.style.height.replace("px", "")))) { hgt = img[0].height; a.style.height = hgt + "px"; } var twd = img.length * wdt; a.style.position = "relative"; a.style.overflow = "hidden"; for (var i=0; i < img.length; i++) { img[i].style.cssFloat = "left"; img[i].style.width = wdt + "px"; } // cointainer var c = document.createElement("div"); c.style.position = "absolute"; c.style.top = "0px"; c.style.left = "0px"; c.style.width = twd + "px"; c.style.height = hgt + "px"; c.innerHTML = a.innerHTML.replace(/\s+</g, "<").replace(/>\s+/, ">"); a.innerHTML = ""; a.appendChild(c); // controls var prv = document.createElement("div"); var nex = document.createElement("div"); prv.style.display = nex.style.display = "none"; prv.style.position = nex.style.position = "absolute"; prv.style.backgroundColor = nex.style.backgroundColor = def.background; prv.style.font = nex.style.font = def.font; prv.style.color = nex.style.color = def.color; prv.style.cursor = nex.style.cursor = "pointer"; prv.style.width = nex.style.width = def.width; prv.style.top = nex.style.top = def.top; prv.style.left = "0px"; nex.style.left = "100%"; nex.style.marginLeft = "-" + def.width; prv.innerHTML = def.textLeft; nex.innerHTML = def.textRight; nex.style.textAlign = "right"; prv.onclick = nex.onclick = function() { var tg = this.parentNode.getElementsByTagName("div")[0]; var tm = wdt; var dr = this === nex ? -1 : 1; var m1 = wdt * .1; var m2 = m1 * dr; var intv = window.setInterval(function() { var lf = parseInt(tg.style.left.replace("px", "")); if (lf >= 0 && dr == 1 || (dr * lf) + wdt >= twd && dr == -1) { window.clearTimeout(intv); return; } tm -= m1; if (tm <= 0) window.clearTimeout(intv); tg.style.left = (lf + m2) + "px"; }, 25); } a.appendChild(prv); a.appendChild(nex); a.onmouseover = a.onmouseout = function(ev) { var ev = ev || window.event; var dp = ev.type == "mouseout" ? "none" : ""; var crl = this.getElementsByTagName("div"); for (var i=1; i < crl.length; i++) crl[i].style.display = dp; } }

Brunoperfectt10