En HTML, créer un diaporama - comment cela fonctionne:

FONTE ZOOM:

Si vous souhaitez étendre votre site avec un diaporama, vous pouvez utiliser des scripts prêts gratuits et de les intégrer en quelques étapes sur votre page HTML pour ce cours déjà. En outre, vous pouvez faire des choses, même simple, même avec seulement quelques lignes de code. Comme les deux façons de travailler, cliquez ici.

Utilisez son diaporama

Pour intégrer un diaporama sur votre site, vous pouvez généralement impliquer soit un script déjà terminé ou programmer le diaporama lui-même.

  • L'avantage de scripts prêts à l'emploi consiste dans le fait qu'il peut être insérée rapidement et facilement dans votre site et ces souvent très nombreuses fonctions, telles que les l'affichage des vignettes simples ou l'ouverture des images dans une vue agrandie.
  • Vous devez insérer dans la plupart des cas, seul le script avec les fichiers images et CSS nécessaires à votre document HTML, vous obtenez une explication dans le fichier de la documentation ou de l'échantillon.
  • Son bons et libres sont par exemple "Nivo Slider" ou "Photo Slider".
  • D'autre part, vous pouvez également créer le code pour le diaporama nous, définir vos paramètres souhaités et se fonctions.
  • Un diaporama simple exige seulement relativement peu de lignes de code et peut être facilement dans ne importe quel fichier HTML à insérer.

Créer code HTML et CSS

Pour créer votre propre diaporama, vous devez d'abord payer le code HTML et le CSS diaporama avec quoi que ce soit.

  • La structure du diaporama dans le code HTML est très simple constructible avec quelques divs. Il vous suffit de créer une zone de div pour le diaporama dans lequel vous appelez les images dans un autre élément div.
  • Cela pourrait se présenter comme suit:


  • Assurez-vous que les images ont soit la même taille ou quittent cette échelle compatible avec CSS. Une fois que vous avez la structure de base de HTML, vous pouvez toujours faire quelques lignes de code CSS de votre diaporama quelque chose.
  • Le code CSS vous pouvez soit insérer dans votre fichier CSS existante ou insérer dans les "" dans votre section de tête. Vous pourriez, par exemple, créer une bordure blanche sur les images et cette boîte blanche rester immobile avec une ombre à partir le reste du contenu de la page HTML. Ce est, par exemple, vous pourriez faire comme suit .:
    #show
    {
    position: relative;
    largeur: 400px;
    hauteur: 400px;
    padding: 20px;
    box-shadow: 0 0 10px rgba;
    }

    #show> div
    {
    position: absolute;
    top: 20px;
    gauche: 20px;
    droite: 20px;
    bottom: 20px;
    }

Animer diaporama avec jQuery

Enfin, il vous suffit de faire votre diaporama même animer, vous pouvez rapidement et facilement mis en œuvre avec jQuery.

  • Il faudrait pour cela que le code suivant et coller dans la section de la tête de votre page HTML et éventuellement personnaliser à votre goût:

  • Avec ce script jQuery laisser toutes les images et divs l'exception de la première entrée Masquer ") .Hide;") etla fonction de diaporama dans un intervalle de répétition toutes les 5 secondes.
  • Dans ce cas, l'image précédente, de sorte que la zone de div précédente, "se fanent lentement en 1,5 secondes et l'image suivante est appelée, qui est ensuite fondu lentement également à moins de 1,5 secondes.
  • Enfin, vous avez la fonction de l'élément div spécifique où ils veulent courir, alors dans ce cas la section div "show" pour animer avec cette fonctionnalité).
VOIR AUSSI:
  1.  
  2.  
  3.  
Sans commentaires

Laisser un commentaire

Code De Sécurité