Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Renato C

Slide Show de Texto

Por , em Javascript

Recommended Posts

Renato C    0

Renato C
Postado

Oi Pessoal !!!!

 

Peguei o script abaixo aqui mesmo no fórum, mas não funciona no IE8, alguém saberia dizer onde está o problema !?!?

 

Nos demais IE's e Firefox funciona legal.

 

Abraço !!!!

 

<html>

<head>

<title>S l i d e S h o w</title>

<style><!--

* {

margin: 0;

padding: 0;

list-style: none;

text-decoration: none;

font-family: Verdana, Arial, Helvetica, Sans-Serif;

}

div#slideshow {

height: 250px;

width: 220px;

border: 1px solid gray;

}

div#slideshow #links {

float: right;

clear: both;

width: 8%;

text-align: center;

}

div#slideshow #links li {

font-size: 12px;

border-top: 1px solid white;

line-height: 49px;

}

div#slideshow #links li.inativo {

background: #EEEEEE;

}

div#slideshow #links li.ativo {

background: #D9D9D9;

}

div#slideshow #slides {

background: #BBBBBB;

height: 100%;

color: white;

font-size: 12px;

}

div#slideshow #slides .visible {

display: block;

}

div#slideshow #slides .hidden {

display: none;

}

div#slideshow #slides div span {

display: block;

}

div#slideshow #slides .titulo{

font-weight: bold;

font-size: 14px;

padding: 5px 0 0 5px;

}

div#slideshow #slides .conteudo {

padding: 0 10 0 5px;

}

 

a:link {text-decoration: none; font-family: arial; font-size: 10pt; color: #6D6E71;}

a:visited {text-decoration: none; font-family: arial; font-size: 10pt; color: #6D6E71;}

a:hover {text-decoration: none; font-family: arial; font-size: 10pt; color: #527CC4;}

a:active {text-decoration: none; font-family: arial; font-size: 10pt; color: #527CC4;}

 

--></style>

<script type="text/javascript">

var tempo;

var intervalo = 2000; //Intervalo entra as mudanças de slides. Definido em milisegundos.

function $(campo) {

return document.getElementById(campo);

}

 

var $A = Array.from = function(iterable) {

if (!iterable) return [];

if (iterable.toArray) {

return iterable.toArray();

} else {

var results = [];

for (var i = 0; i < iterable.length; i++)

results.push(iterable);

return results;

}

};

Function.prototype.bind = function() {

var __method = this, args = $A(arguments), object = args.shift();

return function() {

return __method.apply(object, args.concat($A(arguments)));

};

};

function addEvent(obj, evType, fn) {

if (typeof obj == "string") {

if (null == (obj = document.getElementById(obj))) {

throw new Error("Elemento HTML não encontrado. Não foi possível adicionar o evento.");

}

}

if (obj.attachEvent) {

return obj.attachEvent(("on" + evType), fn);

} else if (obj.addEventListener) {

return obj.addEventListener(evType, fn, true);

} else {

throw new Error("Seu browser não suporta adição de eventos.");

}

}

function nextSlide() {

var divs = $('slides').getElementsByTagName('div');

var i;

for (i = 0; i < divs.length; i++) {

if (divs.className == 'visible') {

divs.className = 'hidden';

$('link' + (i + 1)).className = 'inativo'

i = (i == divs.length - 1) ? 0 : i + 1;

divs.className = 'visible';

$('link' + (i + 1)).className = 'ativo'

break;

}

}

}

function init() {

var as = $('links').getElementsByTagName('a');

var i;

for (i = 0; i < as.length; i++) {

var f = function(v) {

setSlide(as[v]);

}

addEvent(as, 'click', f.bind(this, i));

}

tempo = setInterval('nextSlide()', intervalo);

}

function setSlide(link) {

var divs = $('slides').getElementsByTagName('div');

var i;

for (i = 0; i < divs.length; i++) {

divs.className = 'hidden';

}

var lis = $('links').getElementsByTagName('li');

for (i = 0; i < lis.length; i++) {

lis.className = 'inativo';

}

link.parentNode.className = 'ativo';

i = parseInt(link.firstChild.data);

$('slide' + i).className = 'visible';

clearInterval(tempo);

}

addEvent(window, 'load', init);

</script>

</head>

<body>

<div id="slideshow" name="slideshow">

<div id="links" name="links">

<ul>

<li id="link1" name="link1" class="ativo"> <a href="#">1</a></li>

<li id="link2" name="link2" class="inativo"><a href="#">2</a></li>

<li id="link3" name="link3" class="inativo"><a href="#">3</a></li>

<li id="link4" name="link4" class="inativo"><a href="#">4</a></li>

<li id="link5" name="link5" class="inativo"><a href="#">5</a></li>

</ul>

</div>

<div id="slides" name="slides">

<div id="slide1" name="slide1" class="visible">

<span class="titulo">

Título 1

</span>

<span class="conteudo">

<img src="img_01.jpg" width="50px" height="50px" style="float:left; margin: 8px; margin-left: 0;" />

<br />

Descrição do tesxto 1.

<br />

<br />

Descrição complementar.

</span>

</div>

<div id="slide2" name="slide2" class="hidden">

<span class="titulo">

Título 2

</span>

<span class="conteudo">

<img src="img_02.jpg" width="50px" height="50px" style="float:left; margin: 8px; margin-left: 0;" />

<br />

Descrição do título 2.

</span>

</div>

<div id="slide3" name="slide3" class="hidden">

<span class="titulo">

Título 3

</span>

<span class="conteudo">

<img src="img_03.jpg" width="50px" height="50px" style="float:left; margin: 8px; margin-left: 0;" />

<br />

Descrição do título 3.

</span>

</div>

<div id="slide4" name="slide4" class="hidden">

<span class="titulo">

Título 4

</span>

<span class="conteudo">

<img src="img_04.jpg" width="50px" height="50px" style="float:left; margin: 8px; margin-left: 0;" />

<br />

Descrição do título 4.

</span>

</div>

<div id="slide5" name="slide5" class="hidden">

<span class="titulo">

Título 5

</span>

<span class="conteudo">

<img src="img_05.jpg" width="50px" height="50px" style="float:left; margin: 8px; margin-left: 0;" />

<br />

Descrição do título 5.

</span>

</div>

</div>

</div>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mário Monteiro    179

Mário Monteiro
Postado

Conforme o aviso existente no fórum de origem deste post, não é permitida a postagem de dúvidas nesta área, motivo pelo qual este tópico será movido para o fórum principal deste assunto.

 

Tópico Movido

 

Origem: Artigos, Tutoriais e Matérias (Javascript) http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Destino: Javascript

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito