Galactic Civilizations 3
Rotation de bannières en JavaScript

Rotation de bannières en JavaScript

Catégorie: Javascript.
Posté par le 09/04/2012.
Dernière mise à jour le 09/04/2012.

Description

Ce tutoriel va vous expliquer comment créer un script de rotation de bannière en JavaScript et comment faire en sorte d’avoir une rotation de bannière continue.

Introduction

Ce tutoriel peut être réalisé à l'aide d'un simple éditeur de texte. Il nécessite des connaissances de base en html et en JavaScript.

La page

Pour commencer, nous allons créer un fichier du nom de banniere.html. Ce fichier contiendra une page vide et permettra d’appeler le code permettant la rotation de bannière.

banniere.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" >
<head>
    <title>Rotation de bannières</title>
    <link type="text/css" rel="stylesheet" href="banniere.css"></link>
</head>
<body>

<!-- On appelle le script permettant la rotation de bannières -->
<script language="javascript" src="rotation.js"></script>
</body>

</html>

Nous pouvons remarquer que j’utilise également une feuille de style CSS. Ce fichier servira simplement à embellir un peu nos bannières.

Le design

Nous allons maintenant créer une feuille de style CSS afin d’embellir nos bannières. Pour ce faire, créer un fichier du nom de banniere.css.

banniere.css

#banniere{
   width:480px;
   height:60px;
   margin:auto;
   padding:5px;
   text-align:center;
   border:2px black double;
   background-color:#888888;
}

/*En fonction de la bannière, on change le fond*/
#ban1{
   background-color:#aaaaaa;
}

#ban2{
   background-color:#bbbbbb;
}

#ban3{
   background-color:#cccccc;
}

Le script de rotation de bannière

Maintenant nous pouvons créer le fichier JavaScript qui contiendra le code permettant la rotation de bannière. Pour ce faire créer un fichier du nom de rotation.js.

rotation.js

document.write('<div id="banniere">'+banniere()+'</div>');
function banniere(){
   var nbBanniere = 3;
   /*On choisis de manière aléatoire le numéro de la bannière à afficher*/
   var numero = Math.floor(Math.random()*nbBanniere);
    
   switch(numero){
      case 0:
         var contenu = '<div id="ban1">Banniere numero 1<div>';
         break;
      case 1:
         var contenu = '<div id="ban2"><span>Banniere numero 2<div>';
         break;
      case 2:
         var contenu = '<div id="ban3"><span>Banniere numero 3<div>';
         break;
   }
   return contenu+'<br/><a href="http://www.tutorielsenfolie.com">site de turoriel</a>';
}

Comme vous pouvez le voir ci-dessus, la fonction « banniere » permet d’afficher, de manière aléatoire, une des trois bannières à chaque chargement de la page.

La rotation de bannières continue

Pour terminer ce tutoriel, je vais vous expliquer comment faire en sorte que la rotation de bannières soit continue. C’est-à-dire que chaque bannière s’affiche l’une après l’autre de manière continue, même si l’on ne recharge pas la page. Pour ce faire, modifier le fichier rotation.js et rajoutez le code suivant :

rotation.js

/*Toute les 3 secondes on fait tourner la bannière*/
var timer=window.setInterval("rotation()", 3000);
function rotation(){
    /*On change le contenu de la bannière*/
    document.getElementById('banniere').innerHTML = banniere();
}

Comme vous pouvez le voir ci-dessus, nous créons un minuteur qui demande la rotation de la bannière toutes les 3 secondes.
 

Tu as aimé ce tutoriel ?
Aide nous à améliorer le site ! Deviens partenaire officiel ou suis nous sur facebook !

Commentaires[3]

Tu as aimé ce tutoriel ? Alors partage-le avec tes amis !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo Voir le flux rss

Mots Clés: CSS html JavaScript rotation continue rotation de bannieres web

Veve :
(11/04/2013 - 17:19:44)
il faut juste mettre "sudo" à la place de "su" pour exécuter la commande en root

Veve :
(11/04/2013 - 17:18:56)
Salut tu peux aller lire ce tutoriel: http://www.tutorielsenfolie.com/tutoriels-63-installation-configuration-opennebula.html Il fonctionne aussi sous ubuntu

safa.souissi4 :
(10/04/2013 - 20:58:13)
s'il vous plait c urgent :(

safa.souissi4 :
(10/04/2013 - 20:56:25)
bonsoir,je cherche un tutos pour installer opennebula.org sous ubuntu 12.

Veve :
(18/03/2013 - 20:07:49)
oui, j'essaye de voir d'ou viens le problème.

sonde :
(18/03/2013 - 13:29:57)
re merci (j apprend un peu plus) je crois que j ai trouver pourquoi je peu pas poster si il y a ligne code impossible de poster lol

Veve :
(17/03/2013 - 21:34:49)
Salut, j'espère que ça t'a aidé.

sonde :
(17/03/2013 - 09:59:02)
pour ton aide

sonde :
(17/03/2013 - 09:57:36)
slt Veve impossible de laisser com

sonde :
(17/03/2013 - 09:56:55)
??

Demi-dieu :
(15/03/2013 - 18:41:13)
salut ^^

sonde :
(13/03/2013 - 14:49:35)
un petit coucou

Tanamoureuse :
(29/09/2011 - 06:11:08)
Je t'aime

Faire un don

Ma Publicité ici


Faire un don