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

青灯夜游
Release: 2018-11-05 17:57:38
Original
3252 people have browsed it

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 thecode 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:

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

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; }
Copy after login

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:

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

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

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

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; } }
Copy after login

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);
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!