How to add text on slides with css+js? Implement rotation switching of slides (code attached)

The content of this article is to introduce how to add text on slides with css js? Implement rotation switching of slides (code attached). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In the previous article [How to achieve the slide effect in css? The implementation method of slideshow ] introduces the method of realizing fade-in and fade-out slides. Based on it, this article explains how to add text on the slide, and you can switch different texts with the slide; and fade in and out Method to convert the effect into a carousel switching effect (code attached).

Let’s implement the effect step by step (you can go to the previous article to get the code to achieve the slide effect).

5. Add text to the slide

There are many ways to solve this problem, but perhaps the easiest way is to add some title attributes to the link and use CSS to display it on the image They are:

html code:

<div id="stage">
	<a href="img/1.jpg" title="图片1"><img  src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="How to add text on slides with css+js? Implement rotation switching of slides (code attached)" ></a>
	<a href="img/2.jpg" title="图片2"><img  src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="How to add text on slides with css+js? Implement rotation switching of slides (code attached)" ></a>
	<a href="img/How to add text on slides with css+js? Implement rotation switching of slides (code attached)" title="图片3"><img  src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="How to add text on slides with css+js? Implement rotation switching of slides (code attached)" ></a>
	<a href="img/4.jpg" title="图片4"><img  src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="How to add text on slides with css+js? Implement rotation switching of slides (code attached)" ></a>
	<a href="img/5.jpg" title="图片5"><img  src="/static/imghwm/default1.png"  data-src="img/5.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="How to add text on slides with css+js? Implement rotation switching of slides (code attached)" ></a>
	<a href="img/6.jpg" title="图片6"><img  src="/static/imghwm/default1.png"  data-src="img/6.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="How to add text on slides with css+js? Implement rotation switching of slides (code attached)" ></a>
	<a href="img/7.jpg" title="图片7"><img  src="/static/imghwm/default1.png"  data-src="img/7.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="How to add text on slides with css+js? Implement rotation switching of slides (code attached)" ></a>
	<a href="img/8.jpg" title="图片8"><img  src="/static/imghwm/default1.png"  data-src="img/8.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="How to add text on slides with css+js? Implement rotation switching of slides (code attached)" ></a>
</div>

css code:

#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;
  }	

No changes other than adding the title attribute to our links, we have now started with the basics CTA slideshow or even convert it into a carousel with some adjustments to keyframes.

Rendering:

So, if you must have a homepage slideshow to please the powers that be, consider ditching jQuery , like above. If you have any feedback or questions, please let us know using the button below.

6. Convert to carousel switching effect

Rendering (static, you can compile and run it yourself to see the effect):

Attached is the css js code (html code is as above):

css code:

#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; }
  }

js code:

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);

You’re done, you can do it yourself Compile and see the effect!

Summary: The above is all the content introduced in this article, I hope it will be helpful to everyone's study.

The above is the detailed content of How to add text on slides with css+js? Implement rotation switching of slides (code attached). For more information, please follow other related articles on the PHP Chinese website!