首页 / JAVASCRIPT / css+js如何在幻灯片上添加文字？实现幻灯片的旋转切换（附代码）

css+js如何在幻灯片上添加文字？实现幻灯片的旋转切换（附代码）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css+js如何在幻灯片上添加文字？实现幻灯片的旋转切换（附代码），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3182字，纯文字阅读大概需要5分钟。

内容图文

本篇文章给大家带来的内容是介绍css+js如何在幻灯片上添加文字？实现幻灯片的旋转切换（附代码）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

在之前的文章【css如何实现幻灯片效果？幻灯片的实现方法】中介绍了实现淡入淡出幻灯片的实现方法，本篇文章就在其基础上去解释如何在幻灯片上添加文字，可以随着幻灯片切换不同文字；以及把淡入淡出效果转换成旋转木马的切换效果的方法（附代码）。

下面我们就来一步步实现效果（可以去之前的文章获取实现幻灯片效果的代码）。

5、给幻灯片添加文本文字

有很多方法可以解决这个问题，但也许最简单的方法是在链接中添加一些标题属性，并使用CSS在图像上显示它们：

html代码：

<div id="stage">
	<a href="img/1.jpg" title="图片1"><img src="img/1.jpg" width="640" height="400"></a>
	<a href="img/2.jpg" title="图片2"><img src="img/2.jpg" width="640" height="400"></a>
	<a href="img/3.jpg" title="图片3"><img src="img/3.jpg" width="640" height="400"></a>
	<a href="img/4.jpg" title="图片4"><img src="img/4.jpg" width="640" height="400"></a>
	<a href="img/5.jpg" title="图片5"><img src="img/5.jpg" width="640" height="400"></a>
	<a href="img/6.jpg" title="图片6"><img src="img/6.jpg" width="640" height="400"></a>
	<a href="img/7.jpg" title="图片7"><img src="img/7.jpg" width="640" height="400"></a>
	<a href="img/8.jpg" title="图片8"><img src="img/8.jpg" width="640" height="400"></a>
</div>

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

除了为我们的链接添加title属性之外没有其他任何变化，我们现在已经开始了基本的CTA幻灯片放映，甚至可以将其转换为对关键帧进行一些调整的轮播。

效果图：

css+js如何在幻灯片上添加文字？实现幻灯片的旋转切换（附代码） - 文章图片css+js如何在幻灯片上添加文字？实现幻灯片的旋转切换（附代码） - 文章图片

所以，如果你必须有一个主页幻灯片来取悦那些权力，那就考虑放弃jQuery，就像上面那样。如果您有任何反馈或问题，请使用下面的按钮告诉我们。

6、转换为旋转木马切换效果

效果图（静态的，大家可以自己编译运行，查看效果）：

css+js如何在幻灯片上添加文字？实现幻灯片的旋转切换（附代码） - 文章图片

附上css+js代码（html代码如上）：

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

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

大功告成，大家可以自己动手编译看看效果！

总结：以上就是本篇文章所介绍的全部内容，希望能对大家的学习有所帮助。

以上就是css+js如何在幻灯片上添加文字？实现幻灯片的旋转切换（附代码）的详细内容。

内容总结

以上是互联网集市为您收集整理的css+js如何在幻灯片上添加文字？实现幻灯片的旋转切换（附代码）全部内容，希望文章能够帮你解决css+js如何在幻灯片上添加文字？实现幻灯片的旋转切换（附代码）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/417569.html

来源：【匿名】