News dynamique tournante

8 janvier 2009 à 9:46:28

Bonjour,

J'aimerais savoir comment reproduire l'effet qu'il y a en tête de ce site http://www.radiofg.com/ avec leur bannière tournante et les flèches "suivant" et "précédent" pour naviguer.
Si possible en javascript et pourquoi pas avec Prototype et Scriptaculous que j'utilise déja.

Mon but est de permettre de passer d'une news à l'autre, news qui s'affiche avec l'image de fond de celle ci. Par dessus cette image il y aura une bande grise transparente avec le titre de la news et un petit résumé de la news.

Je pense que vous voyez à peu près ce que je recherche.

PS: j'extrait naturellement mes news d'une BDD.

Golmote

8 janvier 2009 à 11:55:02

Bon, sur radioFG, c'est fait en Flash hein...

Mais tu peux faire plus ou moins la même chose, en mettant toutes tes news dans des divs cachés (display:hidden;) et en changeant le contenu d'un div unique par les contenu de ces divs.

Un truc dans ce gout là...

<head>
<script type="text/javascript">
var nb_news = 3; // nb total de news
var new_act = 0;
function changerNews(droite) {
(droite)? new_act++ : new_act--;
if(new_act<1) { new_act = nb_news; }
if(new_act>nb_news) { new_act = 1; }
document.getElementById("news").innerHTML = document.getElementById("news"+new_act).innerHTML;
}
</script>
</head>
<body onload="changerNews(true);">
<div id="news" style="border:1px solid black;"></div>
<input type="button" value="<--" onclick="changerNews(false);" />
<input type="button" value="-->" onclick="changerNews(true)" />

<div id="news1" style="display:none;">
Le texte de ta première news...
</div>
<div id="news2" style="display:none;">
Le texte de ta deuxième news...
</div>
<div id="news3" style="display:none;">
Le texte de ta troisième news...
</div>
<!-- ETC. -->
</body>

Après pour faire un défilement automatique, je te laisse te débrouiller

b-dav

8 janvier 2009 à 15:29:29

<?php
$refresh = 5000; // Délai de rafraichissement (5000 = 5 secondes)

// connxeion SQL

$list = array();
$req = mysql_query("SELECT ID, nom, console FROM jeux_video WHERE console='PC'");
while($dat = mysql_fetch_assoc($req)){
 $list[] = $dat['ID'].' - '.$dat['nom'].' - '.$dat['console']; // on place les info dans l'array $list
}
?>
<html>
 <head>
  <title>Test</title>
  <script type="text/javascript">
   function AffNews(nb){
    var list = new Array('', '<?php echo implode("', '", $list); ?>');
    var tot = list.length - 1;
    if(nb == tot) nb = 1;
    else nb = nb + 1;
    document.getElementById('AffText').innerHTML = list[nb]+'<br /><input type="button" value=">>" onclick="AffNews('+nb+');" />';
    setTimeout('AffNews('+nb+')', <?php echo $refresh; ?>);
   }
  </script>
 </head>
 <body>
  <div>
   <form action="" method="post">
    <div id="AffText"></div>
   </form>
   <script type="text/javascript">AffNews(0);</script>
  </div>
 </body>
</html>

Erreur PDO - Installation Wamp - Docs PHP et MYSQL.

SRL Killing

8 janvier 2009 à 20:21:38

Tu peut aussi créer une page par new que tu nommera "......1.php" puis "......2.php" et ainsi de suite ...

Une variable i qui vaut 1

Une fonction AJAX qui va récupérer le contenu de la page ".......i.php" ;
l'afficher dans un div ;
incrémenter i ;
puis se rappeler au bout de ..... milli secondes

Essaye de te débrouiller tout seule et si ta des problème ensuite dit le

Ps : pour la barre de temps, si t'y tiens, tu peux faire une image gif, sa devrait allé

Nesk

8 janvier 2009 à 23:54:44

Ouais nan mais utiliser de l'Ajax pour ça c'est une perte de temps et en plus ça multiplie les requêtes SQL, autant mettre quelques news comme le propose Golmote.

b-dav

9 janvier 2009 à 3:14:05

@Nesquik69, tu as disséqué le code que j'ai proposé!? La requête est effectuée juste au chargement de la page (donc qu'un requête), toutes les info nécessaires sont placées dans un tableau (array)...

Erreur PDO - Installation Wamp - Docs PHP et MYSQL.

Nesk

9 janvier 2009 à 7:33:16

Je parlais à Zoro-zerO

titipotter

9 janvier 2009 à 11:16:32

Merci pour vos réponses, je vais tester et esayer d'optimiser sa.