Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img96.imageshack.us/img96/271/noticiav.jpg&key=3301ff0a6e4ee499a4bd58444bef9d7cd82f3ac712ac0dd34eead9e49360efa5" alt="noticiav.jpg" />
Valeu
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>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 ?William, meu sistema é asp
então faça com asp.. tanto faz.
use o Response.write para gerar a mesma coisa que fiz ali.
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...
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.
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><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 */#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;
} 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;
} font-size: 14px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
left: 0;
}<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>Ai tua dúvida é ASP amigo.
você precisa fazer um loop na tag <li> para gerar qntos registros você quiser.
tentei fazer assim
<%
li = 1
Do Until li=10
li = li + 1
Loop
response.write li
%>
mais não adiantou...
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.
ok, valeu obrigado!
Olá. Sua dúvida é de javascript. Vou mover o tópico.