1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Graphique
  5. Diaporama 360 degré complet et tout automatique quatre vitesses de rotation plus pause et affichage optimisé

Diaporama 360 degré complet et tout automatique quatre vitesses de rotation plus pause et affichage optimisé

Soyez le premier à donner votre avis sur cette source.

Vue 17 071 fois - Téléchargée 1 995 fois

Télécharger le projet
Commenter

Description

Panoramique diaporama 360 degré complet et tout automatique, quatre vitesses de rotation plus pause, affichage optimisé, liste déroulante pour toutes sortes d'images....

Il est simple et facile à utiliser, fonctionne et marche c'est garantie avec tout, par tout et sur tout, ce 360 degré diaporama complet et tout automatique, a quatre vitesses de rotation pour chaque direction plus pause, affichage optimisé, annonce le début et la fin de l'affichage, les images sont stockées sur une liste déroulante pour toutes sortes d'images et ce n'est pas le tout: il est man?uvré par déférentes commandes, a la possibilité d'afficher des images que vous n'hébergez pas, et a deux possibilités de navigation: l'une avec images en mouvement et l'autre à images fixes; et le plus important c'est qu'il a les moyens de créer des liens vers les pages en relation avec les images et donne la possibilité d'affiché chaque image entièrement dans une nouvelle fenêtre, et tout cela n'empêche pas le code de s'intégrer facilement dans n'importe quelle page et ne nécessite aucune installation.

Un code de démonstration est disponible sur cette adresse :
http://abdelaziz.elalia.net

Condition d'utilisation: 1- bien s'en servir 2- respecter les droits et les instructions de l'auteur 3- pour ceux qui peuvent et ont des idées: le perfectionner et informer l'auteur et lui signaler tout changement important ajouté au code.
4- bonne chance.

Source / Exemple : 

<!--//
// personalisation de la fenêtre d'affichage du diaporama
function PL(){ 
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
}
function TT(){ 
// entrez vos parametres là ou c'est indiqué, et ne rien Changer d'autres pour garder le droit d'utilisation merci.
/* 
abdelaziz rejeb Elalia Tunisie 
[http://abdelaziz.elalia.net] 
pour tout contact: [http://abdelaziz.elalia.net] 
Elalia - Tunisie le 25/05/2007


*/ 
MX=7 // Entrez le nombre Total d'images
}
image="photos/texte.gif"; // l'adresse complete de l'image à afficher au demarrage
/*
Donnez l'adresse complete de chaque image et tenez compte que vous avez la possibilité d'importer 
des images externes de toutes sortes dans les mêmes dimentions que le diaporama


*/
var imgUrl=new Array(); 
imgUrl[0]="photos/texte.gif"; 
imgUrl[1]="photos/stockholm.jpg"; 
imgUrl[2]="photos/etoile.gif"; 
imgUrl[3]="photos/images.gif"; 
imgUrl[4]="outils/background.jpg"; 
imgUrl[5]="photos/ciel.jpg"; 
imgUrl[6]="photos/soir.jpg"; 

/*
la liste d'images: entrez ici les noms ou les titres des images


*/

op = '<option value="'
fop = '</option>'

image1  = op+imgUrl[0]+'">Bienvenus'+fop;
image2  = op+imgUrl[1]+'">stockholm'+fop; 
image3  = op+imgUrl[2]+'">Des étoiles'+fop;
image4  = op+imgUrl[3]+'">Des images'+fop;
image5  = op+imgUrl[4]+'">Background mobil'+fop;
image6  = op+imgUrl[5]+'">Ciel sur mer'+fop;
image7  = op+imgUrl[6]+'">Beauté du soir'+fop; // Ajouter des option, si vous voulez 

L = image1+image2+image3+image4+image5+image6+image7 // entrez ici les nouvelles images dans l'ordre

/*
création du diaporama


*/

Limg=502 ; // Largeur de l'image
Himg=250 ; // Hauteur de l'image
/*
creation de la commande de vitesse


*/
Mask="outils/gif1.gif"; // adresse comlete de l'image mask
Lmsk=60 ; // Largeur de l'image mask
Hmsk=250 ; // Hauteur de l'image mask
Lmskstop=12 ; // Largeur de la commande Stop
bordure=1 ; // si vous ne voulez pas de bordure alors mettez 0
couleur="#003366" ; // entrez la couleur de la bordure
document.write('<style type="text/css" media="screen">');
document.write('#Diapo360{width: '+ Limg + 'px; height: '+ Himg +'px; background-color:#000000;}'+'IMG {cursor: pointer;};');
document.write('</style>');
var Diapo360 = document.getElementById("Diapo360");
Diapo360.style.border      = "solid "+bordure+"px "+couleur;
Diapo360.style.background  = "url("+image+")  repeat";
X = 1;   // glissement à un coté
Y = -1;  // glissement inversé
D = 10;  // vitesse de rotation
/*
image mask pour variation de vitesse


*/
imd= '<img onmouseover='Y = ';
imf= '' border=0 src=outils/gif1.gif width='+Lmsk+' height='+Hmsk+'>';
/*
la largeure de l'image mask pour le stop


*/
imfs= '' border=0 src='+Mask+' width='+Lmskstop+' height='+Hmsk+'>';
setInterval('Deroulement()', 90); // 90 = Duré du pause
function Deroulement()
{
X += Y / D*100 ;
document.getElementById("Diapo360").style.backgroundPosition = X + "px";
}
/*
creation et affichage des images maske pour commonder la vitesse 
Pour augmenter ou deminuer la vitesse à droite et à gauche Vous pouvez modifier les valeurs dans les lignes suivantes
pour faire tourner avec ou contre le mouvement du curseur il suffit de changer les valeurs positive contre les valeurs negatives au lignes suivantes.


*/
var editer  = ""+
imd+ 7 + imf+
imd+ 2.5 + imf+
imd+ 0.7 + imf+
imd+ 0.3 + imf+
imd+ 0 + imfs+ // la commonde du stop
imd+ -0.3 + imf+
imd+ -0.7 + imf+
imd+ -2.5 + imf+
imd+ -7 + imf+
""; // on peut ajouter et supprimer des masks de vitesse dans les deux sens
Diapo360.innerHTML =(editer);
/*
Option de sélection et remplacement d'images


*/ 
var selection = 0;
function versplus() {
TT()
// annonce la fin du diaporama
if (selection >=MX-1)
alert('Fin du diaporama pour afficher d'autres images nrCliquer sur: [ <<= ]rnOu sélectionnez une image dans la liste.');
selection = document.forms[1].elements[0].selectedIndex;
if (selection < document.forms[1].elements[0].length-1) {selection ++;} 
document.forms[1].elements[0].selectedIndex=selection;
}
function versmoins() {
// annonce le debut du diaporama
if (selection == 0)
alert('Debut du diaporama pour afficher d'autre images nrCliquer sur: [ =>> ]rnOu sélectionnez une image dans la liste.');
selection = document.forms[1].elements[0].selectedIndex;
if (selection > 0) {selection --;} 
document.forms[1].elements[0].selectedIndex=selection;
}
function ChoiX(selection) {
document.forms[1].elements[0].selectedIndex = selection;
}
// Affiche l'image sélectionnée sur la liste deroulante
function ApLiQuE() {
selection = document.forms[1].elements[0].selectedIndex;
document.Diapo360.style.backgroundImage = "url("+ imgUrl[selection] +")";
}
// Création des liens
function changeliens(FF,x)
{
if(document.getElementById)
document.getElementById(x).innerHTML = FF;
}
// Affichage des liens
function AFICHE()
{
changeliens('<a title="afficher la page d'information" target=_blank href='+document.imageimportee.choix.value+'.htm><img style="MARGIN-TOP: 5px; MARGIN-BOTTOM: 1px; MARGIN-RIGHT: 1px; MARGIN-LEFT: 3px" border=0 src=outils/apage.gif width=16 height=16> Page','lien_page'); changeliens('<a title="afficher l'image entière" target=_blank href='+document.imageimportee.choix.value+'><img style="MARGIN-TOP: 5px; MARGIN-BOTTOM: 1px; MARGIN-RIGHT: 1px; MARGIN-LEFT: 5px" border=0 src=outils/aimage.gif width=16 height=16> Image','lien_image');
}
CO='<span style="FONT-SIZE: 7pt"><a title="Pur Tout Contact Cliquez ICI" style="TEXT-DECORATION: none" href="[http://abdelaziz.elalia.net]" target="_blank"><font color="#353535">Développé Le: 25/05/2007 Par Abdelaziz Rejeb - Elalia 7016 - Tunisie</font></a></span>';
// Tres important: si vous utilisez des images importés d'autres emplassements... vous devez créer un liens vers la page d'information en relation, si non suprimez le liens de la page.
// -->

Conclusion :

Le style et le code html c'est à vous de s'en occuper,
Pour obtenir de l'aide et avoir plus d'information vous pouvez toujours me contacter sur cette adresse : http://abdelaziz.elalia.net
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Signaler
Messages postés
120
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
12 janvier 2017
Bonjour :
Pour s'eux qui sont intéressés, je viens de poster la version 2 du diaporama 360°plus complète avec plus d'options et plus de simplicité et lecture automatique, voir ici : http://www.javascriptfr.com/codes/DIAPORAMA-360-V2-MOUVEMENT-DANS-QUATRE-SENS-ROTATION_47848.aspx
Signaler
Messages postés
54
Date d'inscription
lundi 10 juillet 2006
Statut
Membre
Dernière intervention
11 septembre 2011
J'avais oublié de mettre une évaluation, maintenant, c'est fait. Il serait bien d'apporter les quelques modifications proposées plus haut par XtremDuke.
Signaler
Messages postés
54
Date d'inscription
lundi 10 juillet 2006
Statut
Membre
Dernière intervention
11 septembre 2011
Superbe! Joli et efficace. Bravo !
Signaler
Messages postés
62
Date d'inscription
dimanche 14 novembre 2004
Statut
Membre
Dernière intervention
21 avril 2010
super source, le scroll up and down serait certainement un ajout interessant !
Signaler
Messages postés
120
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
12 janvier 2017
Merci Kimjoa
Bonne chance et bon courage.
Afficher les 9 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (abdelaziz_info)