Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal!
Estou montando um sistema de slide show com ajuda de amigos do forun e tambem do forun Webly seguindo as dicas deles o esqueminha tá funcionando certinho mas na hora de aplicar o css o trem tá ficando tudo doido gostária que alguém me ajudase a resolver esse problema vo coloca o codigo e uma imagem de como eu imaginei o esquema pra você´s visualizarem melhor o meu problema abraço a todos.
Imagem de como deveria ser:
Código que estou usando:
<html>
<head>
<!--#include file="conect.asp" -->
<title>S l i d e S h o w - by tmferreira</title>
<style><!--
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
}
div#slideshow {
height: 250px;
width: 500px;
border: 1px solid black;
}
div#slideshow #links {
height: 91px;
width: 242px;
float: right;
' clear: both;
' width: 10%;
text-align: center;
display:inline;
border: 1px solid red;
}
div#slideshow #links li {
font-size: 12px;
border-top: 1px solid white;
' line-height: 49px;
display:inline;
height: 31px;
width: 80px;
}
div#slideshow #links li.inativo {
background: #EEEEEE;
display:inline;
height: 31px;
width: 80px;
}
div#slideshow #links li.ativo {
background: #D9D9D9;
display:inline;
height: 31px;
width: 80px;
}
div#slideshow #slides {
background: #BBBBBB;
' height: 100%;
height: 69px;
width: 493px;
color: white;
font-size: 14px;
}
div#slideshow #slides .visible {
display: block;
height: 69px;
width: 493px;
}
div#slideshow #slides .hidden {
display: none;
height: 69px;
width: 493px;
}
div#slideshow #slides div span {
display: block;
}
div#slideshow #slides .titulo{
font-weight: bold;
font-size: 16px;
padding: 5px 0 0 5px;
}
div#slideshow #slides .conteudo {
padding: 0 0 0 0;
}
--></style>
<script type="text/javascript">
var tempo;
var intervalo = 2000;
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[i]);
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[i].className == 'visible') {
divs[i].className = 'hidden';
$('link' + (i + 1)).className = 'inativo'
i = (i == divs.length - 1) ? 0 : i + 1;
divs[i].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[i], '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[i].className = 'hidden';
}
var lis = $('links').getElementsByTagName('li');
for (i = 0; i < lis.length; i++) {
lis[i].className = 'inativo';
}
link.parentNode.className = 'ativo';
i = parseInt(link.firstChild.data);
$('slide' + i).className = 'visible';
clearInterval(tempo);
}
addEvent(window, 'load', init);
</script>
</head>
<body>
<% connect %>
<div id="slideshow" name="slideshow">
<div id="slides" name="slides">
<%
Dim contador
contador = 1
Set rs = Conn.Execute("SELECT top 3 * FROM evento order by data desc")
If not rs.EOF Then
Do until rs.eof 'loop
%>
<div id="slide<%=contador%>" name="slide<%=contador%>" class="visible">
<img src="evento/<%=Rs("pasta")%>/img/grd/(1).jpg" width="250px" height="160px" style="float:left; margin: 0px; margin-right: 1px;" />
<span class="conteudo">
<%=Rs("nome")%>
<%=Rs("data")%>
<%
Set rs1 = Conn.Execute("SELECT * FROM guia WHERE ide like '"&rs("idg")&"'")
If not rs1.EOF Then
Do until rs1.eof 'loop
%>
<%=Rs1("nome")%>
<%
rs1.MoveNext
Loop
Else
End if
%>
</span>
</div>
<%
rs.MoveNext
contador = contador + 1
Loop
Else
Response.Write(" <p>Pedimos desculpa pois ouve um problema.</p> ")
End if
%>
</div>
<div id="links" name="links">
<ul>
<%
Dim contadora
contadora = 1
Set rsa = Conn.Execute("SELECT top 3 * FROM evento order by data desc")
If not rsa.EOF Then
Do until rsa.eof 'loop
%>
<li><img src="evento/<%=Rsa("pasta")%>/img/pqn/(1).jpg" width="80px" height="60px"/></li>
<%
rsa.MoveNext
contadora = contadora + 1
Loop
Else
Response.Write(" <p>Pedimos desculpa pois ouve um problema.</p> ")
End if
%>
</ul>
<ul>
<%
Dim contadorb
contadorb = 1
Set rsb = Conn.Execute("SELECT top 3 * FROM evento order by data desc")
If not rsb.EOF Then
Do until rsb.eof 'loop
%>
<li id="link<%=contadorb%>" name="link<%=contadorb%>" class="ativo"><a href="#"><%=contadorb%></a></li>
<%
rsb.MoveNext
contadorb = contadorb + 1
Loop
Else
Response.Write(" <p>Pedimos desculpa pois ouve um problema.</p> ")
End if
%>
</ul>
</div>
</div>
<% disconnect %>
</body>
</html>Carregando comentários...