Comment ajouter du texte sur les slides avec css+js ? Implémenter la commutation de rotation des diapositives (code ci-joint)

Le contenu de cet article est de présenter comment ajouter du texte sur les diapositives avec css+js ? Implémenter la commutation de rotation des diapositives (code ci-joint). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Dans l'article précédent [Comment obtenir un effet diaporama avec CSS ? La méthode d'implémentation du diaporama] présente la méthode d'implémentation des diapositives avec fondu entrant et sortant. Sur cette base, cet article explique comment ajouter du texte sur la diapositive, et vous pouvez changer de texte avec la diapositive et le fondu ; in et out Méthode pour convertir l'effet en un effet de commutation de carrousel (code ci-joint).

Implémentons maintenant l'effet étape par étape (vous pouvez consulter l'article précédent pour obtenir le code pour obtenir l'effet slide).

5. Ajouter du texte à la diapositive

Il existe de nombreuses façons de résoudre ce problème, mais la méthode la plus simple consiste peut-être à ajouter des attributs de titre au lien et à l'afficher sur l'image en utilisant CSS. Ce sont :

code html :

<div id="stage">
	<a href="img/1.jpg" title="图片1"><img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Comment ajouter du texte sur les slides avec css+js ? Implémenter la commutation de rotation des diapositives (code ci-joint)" ></a>
	<a href="img/2.jpg" title="图片2"><img  src="/static/imghw/default1.png"  data-src="img/2.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Comment ajouter du texte sur les slides avec css+js ? Implémenter la commutation de rotation des diapositives (code ci-joint)" ></a>
	<a href="img/Comment ajouter du texte sur les slides avec css+js ? Implémenter la commutation de rotation des diapositives (code ci-joint)" title="图片3"><img  src="/static/imghw/default1.png"  data-src="img/4.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Comment ajouter du texte sur les slides avec css+js ? Implémenter la commutation de rotation des diapositives (code ci-joint)" ></a>
	<a href="img/4.jpg" title="图片4"><img  src="/static/imghw/default1.png"  data-src="img/4.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Comment ajouter du texte sur les slides avec css+js ? Implémenter la commutation de rotation des diapositives (code ci-joint)" ></a>
	<a href="img/5.jpg" title="图片5"><img  src="/static/imghw/default1.png"  data-src="img/5.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Comment ajouter du texte sur les slides avec css+js ? Implémenter la commutation de rotation des diapositives (code ci-joint)" ></a>
	<a href="img/6.jpg" title="图片6"><img  src="/static/imghw/default1.png"  data-src="img/6.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Comment ajouter du texte sur les slides avec css+js ? Implémenter la commutation de rotation des diapositives (code ci-joint)" ></a>
	<a href="img/7.jpg" title="图片7"><img  src="/static/imghw/default1.png"  data-src="img/7.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Comment ajouter du texte sur les slides avec css+js ? Implémenter la commutation de rotation des diapositives (code ci-joint)" ></a>
	<a href="img/8.jpg" title="图片8"><img  src="/static/imghw/default1.png"  data-src="img/8.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Comment ajouter du texte sur les slides avec css+js ? Implémenter la commutation de rotation des diapositives (code ci-joint)" ></a>
</div>

code css :

#stage a::after {
    position: absolute;
    left: 11px;
    bottom: 11px;
    padding: 2px 0;
    width: calc(100% - 22px);
    background: rgba(0,0,0,0.5);
    text-align: center;
    content: attr(title);
    font-size: 1.1em;
    color: #fff;
  }	

Aucun autre changement autre que l'ajout d'un attribut de titre à notre lien, ce que nous avons maintenant Démarre un diaporama CTA de base et peut même le convertir en carrousel avec quelques modifications des images clés.

Rendu :

Donc, si vous devez avoir un diaporama de page d'accueil pour plaire aux pouvoirs en place, pensez à abandonner jQuery, comme au-dessus de. Si vous avez des commentaires ou des questions, veuillez nous en informer en utilisant le bouton ci-dessous.

6. Convertir en effet de commutation de carrousel

Rendu (statique, vous pouvez le compiler et l'exécuter vous-même pour voir l'effet) :

Joindre le code css+js (code html comme ci-dessus) :

code css :

#stage {
    margin: 1em auto;
    width: 640px;
    height: 400px;
    border: 10px solid #000;
    overflow: hidden;
  }
  #stage a {
    position: relative;
    display: inline-block;
  }
 #stage a::after {
    position: absolute;
    left: 11px;
    bottom: 11px;
    padding: 2px 0;
    width: calc(100% - 22px);
    background: rgba(0,0,0,0.5);
    text-align: center;
    content: attr(title);
    font-size: 1.1em;
    color: #fff;
  }

  #stage a:nth-of-type(2) {
    left: 640px;
    top: -50%;
    animation-name: slider;
    animation-delay: 4s;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0,1.5,0.5,1);
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }

  @keyframes slider {
    from { transform: translateY(-50%) rotate(30deg); left: 360px; }
    to   { transform: translateY(-50%); left: 0px; }
  }

code js :

window.addEventListener("DOMContentLoaded", function(e) {

    var stage = document.getElementById("stage");
    var slideComplete = function(e) { stage.appendChild(arr[0]); };
    var arr = stage.getElementsByTagName("a");
    for(var i=0; i < arr.length; i++) {
      arr[i].addEventListener("animationend", slideComplete, false);
    }

  }, false);

Vous C'est fait, vous pouvez le compiler vous-même et voir l'effet !

Résumé : Ce qui précède est tout le contenu présenté dans cet article, j'espère qu'il sera utile à l'étude de chacun.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!