Un forum au top

Avec simplicité vient apprendre dans nos différentes catégories.
 
AccueilAccueil  PortailPortail  Donations  ConnexionConnexion  S'enregistrerS'enregistrer  
Partagez

Diaporama horizontal

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
Ptite_Perle
Messages : 5061
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 57
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 93631
Fondatrice
Ptite_Perle
Ptite_Perle
  • Profil
  • MP
  • Messages
  • Sujets
  • Participation
  • Visiteurs
  • Message sur profil

  • MessageSujet: Diaporama horizontal Diaporama horizontal EmptyJeu 30 Nov 2017 - 20:02

    Coucou

    Voici un script pour vous aidez à faire un diaporama horizontal.

    Une autre manière de faire défiler des images est de simuler une visualisation 3D en "collant" les images sur un cylindre (à base de polygone régulier) que l'on fait "tourner".

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
      <title>Images défilant verticalement sur un cylindre</title>
      <script type="text/javascript">
      //<![CDATA[
        var pag=["Aihole","Badami","Belur","Halebid","Hampi","Haveri","Lakkundi","Pattadakal","Somnathpur"];
        var tim=50;  // temps de pause en millisecondes entre les appels à Nxt
        var wIm=160; // largeur en pixels des images
        var hIm=120; // hauteur en pixels des images
        var nPn=9;   // nombre de pans du cylindre (nPn>=2)
        var npP=40;  // nombre de pas par pan;
        var pad=6;   // padding de la zone des images défilantes
        var tmr,nIm=pag.length;        // timer, nombre d'images nIm>=nIv
        var nIv=Math.floor((nPn+1)/2); // nombre d'images visibles
        var A=2*Math.PI/nPn,E=A/npP;   // angle (en rad) par pan et par pas
        var D=Math.floor((hIm+2)/Math.sin(A/2)); // diamètre (en pixels) du cylindre
        var R=D/2;                     // rayon (en pixels) du cylindre
        var cosA=Math.cos(A),sinA=Math.sin(A),cosE=Math.cos(E),sinE=Math.sin(E);
        var iIm=nIm-nIv,iE=0,uA0=R*Math.cos(-A/2),vA0=R*Math.sin(-A/2),uA=uA0,vA=vA0;

        function Nxt() {
          var i,k=iIm,u=uA,v=vA,uu,h,st,r=R+pad;
          for (i=0; i<nIv; i++){
            uu=u; u=uu*cosA-v*sinA; v=uu*sinA+v*cosA; // rotation(A)
            h=(uu>u+2)?uu-u-2:0;
            st=document.getElementById('im'+k).style;
            st.top=(r+u)+'px'; st.height=h+'px'; st.opacity=h/hIm;
            if (--k<0) k=nIm-1;
          }
          u=uA; uA=cosE*u-sinE*vA; vA=sinE*u+cosE*vA; // rotation(E)
          if (++iE>=npP) {
            iE=0; uA=uA0; vA=vA0;
            if (++iIm>=nIm) iIm=0;
          }
        }
        function Clk(i) { // à remplacer par vos propres 'actions'
          window.open('PagVertical/'+pag[i]+'.html','_self','','');
        }
        function Ini() { // dans body, ajustez également la position absolue du div:id='imd'
          var i, s='', e=document.getElementById('imd');
          for (i=0; i < nIm; i++) s += "<img id='im"+i+"' onclick='Clk("+i+")' title='"
            +pag[i]+"' style='position:absolute; left:"+pad+"px; height:0; width:"+wIm
            +"px; cursor:pointer' src='ImgVertical/"+pag[i]+".jpg'/>";
          e.style.width=(2*pad+wIm)+'px'; e.style.height=(2*pad+D)+'px'; e.innerHTML=s;
          tmr=setInterval('Nxt()',tim);
          // les 3 lignes suivantes ne sont pas indispensables
          s="<span style='color:red;'>Selection par le nom:</span>";
          for (i=0; i < nIm; i++) s += "<br/><a href='PagVertical/"+pag[i]+".html'>"+pag[i]+"</a>";
          window.document.getElementById('lsN').innerHTML=s;        
        }
      //]]>
      </script>
    </head>

    <body style='background-color:#BBBBBB' onload='Ini()'>
       <div id='imd' style='position:absolute; left:70px; top:35px; background-color:#444444'
          onmouseover='clearInterval(tmr)' onmouseout='tmr=setInterval("Nxt()",tim)'>
       </div>
       <!-- la suite n'est pas indispensable et sert juste d'exemple -->
       <div style='float:left; width:99px; height:160px; padding:400px 6px 6px 6px; background-color:#CCCCCC;'>
          <hr />Obtenez<br/>les exemples<br/>complets:<br/>horizontal<br/>et vertical:<br/><br/>  
          <a href='http://www.william-voirol.ch/Prog/ImagesDefilantes/Cylindre.zip'>Zip</a>
       </div>
       <div style='margin-left:260px;'> <!-- ajustez éventuellement la valeur margin-left -->
          <p style='font-size:18px; color:blue;'>Quelques temples du Karnataka en Inde</p>
          <div id='lsN' style='width:160px; height:110px; background-color:#FFFFDD; padding-left:4px;
             overflow:auto; margin-left:80px;'></div> <!-- contient la liste de noms -->
          <p style='color:green;'>
             <br/>Les temples de l'Inde vous intéressent ? :<br/>  
             <a href='http://www.william-voirol.ch'>Splendeur de l'Inde</a>
          </p>
          <hr />
          <p style='font-size:24px;'><br/>Images défilant verticalement sur un cylindre</p>
          <p>
             -  Choix du nombre d'images et du nombre de pans 'nPn' du cylindre.<br/>
             -  La zone des images défilantes peut être placée librement.<br/>
             -  Sa hauteur dépend de la hauteur des images et de 'nPn'.<br/>
             -  Dans l'exemple nPn=9; essayez d'autres valeurs, en particulier 2.<br/>
             -  La vitesse de défilement dépend des variables 'tim' et 'npP'.<br/>
             -  Le mouvement s'arrête lorsque la souris survole les images.<br/>
             -  Il est possible d'associer une action au "click" sur une image:<br/>
                      l'exemple propose l'ouvertue d'une nouvelle page.
          </p>
          <p style='color:red;'>
             Testé avec les navigateurs:<br/>
             Internet Explorer 8 et 9, Firefox 5, Navigator 9,<br/>
             Google Chrome 11, Opera 11, Safari 5.
          </p>
       </div>
    </body>
    </html>
    Revenir en haut Aller en bas
    AuteurMessage
    Rectangletops
    Messages : 221
    Venue : 27/03/2011 Je suis : Masculin
    Né(e) le : 04/01/1954
    Age : 66
    Je vie à : Belgique
    Humeur : Bonne souvent.
    Mes Points : 70401
    inactif
    Rectangletops
    Rectangletops
  • Profil
  • MP
  • Messages
  • Sujets
  • Participation
  • Visiteurs
  • Message sur profil

  • MessageSujet: Re: Diaporama horizontal Diaporama horizontal EmptyJeu 10 Oct 2019 - 9:17
    Bonjour, ce code ce place ou ?
    Revenir en haut Aller en bas
    AuteurMessage
    Ptite_Perle
    Messages : 5061
    Venue : 27/06/2009 Je suis : Féminin
    Né(e) le : 17/09/1963
    Age : 57
    Je vie à : Lyon
    Humeur : Bonne humeur
    Mes Points : 93631
    Fondatrice
    Ptite_Perle
    Ptite_Perle
  • Profil
  • MP
  • Messages
  • Sujets
  • Participation
  • Visiteurs
  • Message sur profil

  • MessageSujet: Re: Diaporama horizontal Diaporama horizontal EmptyDim 13 Oct 2019 - 11:32
    Coucou

    Soit sur une nouvelle page Html

    Ou entre head prendre à partir d'ici le  
    Code:
    <head>
      <title>Images défilant verticalement sur un cylindre</title>

    et entre
    Code:
    </body>

    Amicalement
    Revenir en haut Aller en bas

    Diaporama horizontal

    Voir le sujet précédent Voir le sujet suivant Revenir en haut
    Page 1 sur 1

    Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
    Un forum au top :: Le comptoir du renseignement :: Codes pour Sites web-