Ir para conteúdo

Arquivado

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

Eddy Fernandes

Mudar background dinamicamente

Por , em ASP Clássico

Recommended Posts

Eddy Fernandes    0

Eddy Fernandes
Postado

Olá galera,

 

Estou reformulando um site (http://website2.cesmavitoria.com/) e uma das idéias de implementação é mudar a imagem de background automaticamente, a partir de um banco de dados Access, com um pequeno efeito Fade entre as imagens.

 

Tenho um código pronto, mas estou com dificuldades para mesclar ASP e Javascript. Segue o código:

<script type="text/javascript">// <![CDATA[
var imageCount = 0;
var currentImage = 0;
var images = new Array();
 
images[0] = 'ENDERECO DA IMAGEM';
images[1] = 'ENDERECO DA IMAGEM';
images[2] = 'ENDERECO DA IMAGEM';
images[3] = 'ENDERECO DA IMAGEM';
images[4] = 'ENDERECO DA IMAGEM';
 
var preLoadImages = new Array();
for (var i = 0; i < images.length; i++)
{
   if (images[i] == "")
      break;
 
   preLoadImages[i] = new Image();
   preLoadImages[i].src = images[i];
   imageCount++;
}
 
function startSlideShow()
{
   if (document.body && imageCount > 0)
   {
      document.body.style.backgroundImage = "url("+images[currentImage]+")";    
      document.body.style.backgroundAttachment = "fixed";
      document.body.style.backgroundRepeat = "repeat";
      document.body.style.backgroundPosition = "left top";
 
      currentImage = currentImage + 1;
      if (currentImage > (imageCount-1))
      { 
         currentImage = 0;
      }
      setTimeout('startSlideShow()', 3000);
   }
}
startSlideShow();
// ]]></script>

 

O código acima funciona perfeitamente, mas apenas digitando manualmente o caminho das imagens.

Agradeço demais a ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

Olá Eddy, blza.

 

Veja um que uso, depois basta vc fazer suas modifições:

 

<%
Dim img_fundo
Set img_fundo = dados.Execute("select imagem from img_fundo")

If img_fundo.EOF = False Then
%>

<body background="./img_fundo/<%=img_fundo("imagem")%>">

<%
Else 

Response.Write("<style>")
Response.Write("body {")
Response.Write("background-image: url(./img_fundo/BG_fundo.jpg);")
Response.Write("}")
Response.Write("</style>")

End If

img_fundo.Close
Set img_fundo = Nothing
%>

Espero que ajude.

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

eu uso jQuery, mais rápido. Onde vc pode até colocar uma interatividade com o user, seja clicando, timer etc

Compartilhar este post

Link para o post
Compartilhar em outros sites

theverme    0

theverme
Postado

uso FileSystemObject, Jquery cycle:

 

<!--div-banner -->
<div id="div-banner">
<ul>
<%
Set Fso = Server.CreateObject ("Scripting.FileSystemObject")
Set arquivo = Fso.GetFolder("c:\inetpub\wwwroot\web\web-car\2\banner\")
Set arquivos = arquivo.files
For Each a in arquivos
%>
<li><img src="banner/<%=a.name%>" /></li>
<%
Next
Set arquivos = nothing
Set arquivo = nothing
Set Fso = nothing
%>
</ul>
<div class="btnNext" title="próximo" id="next"></div>
<div class="btnPrev" title="anterior" id="prev"></div>
</div>
<!--fim-banner -->
<!--css-->
#div-banner{width:950px; height:300px; float:left; margin-bottom:3px;}
#div-banner ul{list-style:none;}
#div-banner li{float:left;}
#div-banner li img{ width:950px; height:300px; float:left; border:0px;}
#div-banner div.btnNext{ position:relative; z-index:100; float:right; top: -180px;background:url(../imagens/btnNext.gif); width:47px; height:50px; cursor:pointer;}
#div-banner div.btnPrev{ position:relative; z-index:100; float:left; top: -180px;background:url(../imagens/btnPrev.gif); width:47px; height:50px; cursor:pointer;}
<!--fim-css -->
<!--js-->
$("#div-banner ul").cycle({fx: 'fade',speed: 2500,timeout: 6000,prev : '#prev',next : '#next',pager : '#pager'});
<!--fim-js -->
espero ter ajudado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

Eu uso este:

<script language="javascript" type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {          
    $("img").lazyload({
        effect : "fadeIn"
    });
});
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos ASP Clássico
×

Informação importante

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

  Aceito