Ir para conteúdo

POWERED BY:

Arquivado

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

aprendizes

[Resolvido] SlideShow Notícias

Por , em Javascript

Recommended Posts

aprendizes    0

aprendizes
Postado

Galerinha tô precisando montar um sisteminha de rotação de notícia com foto. Como poderia estar fazendo, alguem teria algum exemplo do código? A baixo posto um modelo:

 

noticiav.jpg

 

Valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

exemplo:

 

http://www.wbruno.com.br/blog/2011/03/14/banner-galeria-slideshow-adcast-mostrando-um-pouco-poder-cycle-jquery/

Compartilhar este post

Link para o post
Compartilhar em outros sites

aprendizes    0

aprendizes
Postado

então eu encontrei vários exeplos na internet, mas eu preciso saber como posso receber dados do banco de dados, por examplo neste code:

 

01.<html>  
02.<head>  
03.<script type="text/javascript" src="js/jquery-1.5.min.js"></script>  
04.<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>  
05.<script type="text/javascript">  
06.$(document).ready(function(){   
07.    $('#slide_fotos').cycle({   
08.        fx: 'fade',   
09.        pager: '#pager'   
10.    });   
11.});   
12.</script>  
13.<style type="text/css">  
14.* {   
15.    list-style: none;   
16.    margin: 0;   
17.    padding: 0;   
18.}   
19.body {   
20.    font: 12px Verdana, sans-serif;   
21.    color: #000;   
22.}   
23.a { text-decoration: none; }   
24.a:hover { text-decoration: underline; }   
25.#slideshow {   
26.    width: 640px;   
27.    height: 270px;   
28.    position: relative;   
29.}   
30.#slide_fotos p {   
31.    position: absolute;   
32.    right: 0;   
33.    top: 210px;   
34.    z-index: 3;   
35.    padding: 10px 20px;   
36.    background: url('../images/over_white.png');   
37.}   
38.#slide_fotos {   
39.    height: 100%;   
40.    overflow: hidden;   
41.}   
42.#pager {   
43.    position: absolute;   
44.    z-index: 10;   
45.    top: 20px;   
46.    right: 20px;   
47.}   
48.#pager a {   
49.    color: #000;   
50.    width: 17px;   
51.    height: 17px;   
52.    line-height: 15px;   
53.    text-align: center;   
54.    display: inline-block;   
55.    font-size: 10px;   
56.    margin: 2px;   
57.    color: #fff;   
58.}   
59.#pager a.activeSlide {   
60.    color: #000;   
61.    background: url('../images/over_white.png');   
62.}   
63.</style>  
64.</head>  
65.<body>  
66.    <div id="slideshow">  
67.        <ul id="slide_fotos">  
68.            <li><img src="images/medium/01.jpg" alt="" title="Foto 01" />  
69.                <p>Primeira Imagem, céu azul!</p></li>  
70.            <li><img src="images/medium/02.jpg" alt="" title="Foto 02" />  
71.                <p>Segunda Imagem, queda d'agua</p></li>  
72.            <li><img src="images/medium/03.jpg" alt="" title="Foto 03" />  
73.                <p>Terceira Imagem, universo, negro</p></li>  
74.            <li><img src="images/medium/04.jpg" alt="" title="Foto 04" />  
75.                <p>Quarta Imagem, praia calmaria</p></li>  
76.            <li><img src="images/medium/05.jpg" alt="" title="Foto 05" />  
77.                <p>Quinta Imagem, montanhas, lago</p></li>  
78.            <li><img src="images/medium/06.jpg" alt="" title="Foto 06" />  
79.                <p>Sexta Imagem, mais verde natureza</p></li>  
80.        </ul><!-- /fotos -->  
81.        <p id="pager">  
82.  
83.        </p><!-- /pager -->  
84.    </div><!-- /slideshow -->  
85.</body>  
86.</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

remova as linhas numeradas.

 

apenas faça tua linguagem server-side gerar o html pra você.

 

        <ul id="slide_fotos"> 

<?php
  while( $dados = $query->fetch_object() )
 echo '<li><img src="images/medium/'.$dados->foto.'" alt="" title="'.$dados->nome.'" />  
               <p>'.$dados->nome.'</p></li>';
?>

       </ul><!-- /fotos -->

entendeu ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

então faça com asp.. tanto faz.

 

use o Response.write para gerar a mesma coisa que fiz ali.

Compartilhar este post

Link para o post
Compartilhar em outros sites

aprendizes    0

aprendizes
Postado

então coloquei assim 

<div id="slideshow"> 
 <ul id="slide_fotos">
   <img src="admin/<%Response.Write foto%>" alt="<%Response.Write Resumo%>" width="263" height="220" border="0"> 
   <p> 
     <%Response.Write Resumo%>
   </p></li>
 </ul>
 <!-- /fotos -->

mas não aparece o resumo da matária e nem a foto...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

aperte Ctrl + U ( Exibir > Código Fonte ), e veja como está o HTML que você está gerando.

 

corrija até ficar certo.

 

se tiver duvidas, poste essa saida que pedi.

Compartilhar este post

Link para o post
Compartilhar em outros sites

aprendizes    0

aprendizes
Postado

beleza, agora funcionaou, porem só aparece uma única notícia, como poderia add mais umas 3 matérias pra ficar alternando entre estas 4 notícias?

 

olha o code:

 

<%session.LCID=1046%>
<!-- #include file="config.inc" -->

<%			
		Query = "SELECT * from noticias order by id desc"
		Set Rs = DB.Execute(Query)
		ID = Rs("ID")
		Foto = Rs("Foto")
                       Resumo = RS("Resumo")

		%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>s3Slider jQuery plugin</title>
<!-- CSS -->
<style type="text/css" media="screen">
#slider {
   width: 410px; /* important to be same as image width */
   height: 300px; /* important to be same as image height */
   position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
   width: 410px; /* important to be same as image width or wider */
   position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
   float: left;
   position: relative;
display: none;
}
.sliderImage span {
   position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 384px;
   background-color: #000;
   filter: alpha(opacity=70);
   -moz-opacity: 0.7;
-khtml-opacity: 0.7;
   opacity: 0.7;
   color: #fff;
   display: none;
}
.clear {
clear: both;
}
.sliderImage span strong {
   font-size: 14px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
   left: 0;
}
ul { list-style-type: none;}
</style>
<!-- JavaScripts-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="s3Slider.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
       $('#slider').s3Slider({
           timeOut: 3000
       });
   });
</script>
</head>

<body>


   <div id="slider">
       <ul id="sliderContent">
           <li class="sliderImage">
               <a href=""><img src="admin/<%Response.Write foto%>"></a>
               <span class="top"><strong></strong><br /><%Response.Write Resumo%>
           </li>

           <div class="clear sliderImage"></div>
       </ul>
   </div>
   <!-- // slider -->

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Ai tua dúvida é ASP amigo.

 

 

você precisa fazer um loop na tag <li> para gerar qntos registros você quiser.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Crie um tópico no Forum de ASP, lá poderão te ajudar melhor.

 

você só precisa gerar um loop com dados do banco, para criar um LI para cada linha do teu resultset.

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