Slide Show de Texto
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>*Discussão (1)
Carregando comentários...