效果图
代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标题文字轮播</title> <style> *{ padding: 0px; margin: 0px; } .display{ height: 30px; position: relative; /* 溢出的元素隐藏 */ overflow: hidden; } p { line-height: 30px; position: absolute; /* 默认p元素都在div下面 */ top: 30px; } /* 先定义两个class ：show刚好显示在div中间；up跑到div上面*/ .show{ top: 0px;transition: 1s top ease-out;} .up{ top: -30px;transition: 1s top ease-out;} /* 给每个p元素设置不同的颜色 */ p:nth-child(1){ color: fuchsia;} p:nth-child(2){ color: lightgreen;} p:nth-child(3){ color: blueviolet;} p:nth-child(4){ color: limegreen;} </style></head><body> <div class="display"> <p class="show">这是一个标题文字轮播效果</p> <p>使用到简单的javascript</p> <p>你觉得不错的话可以可以看看我的主页</p> <p class="end">最后别忘了点赞哦</p> </div> <script> //每2.5秒执行一次下面的代码 setInterval(function () { //获取class为show的p标签 let show = document.querySelector('p.show'); //获取show的下一个p标签，如果show是最后一个标签，则获取第一个p标签 let next = show.nextElementSibling || document.querySelector('p:first-child'); //获取class为 up的p标签 let up = document.querySelector('p.up'); //当移除class为show的p标签的class show.classList.remove('show'); //然后给它添加值为：up的class， show.classList.add('up'); //给下一个标题他添加值为：show的class next.classList.add('show'); //如果有那个有带有up，则移除他的up， if(up) { up.classList.remove('up'); } },2500) </script></body></html>
港控/mmm°
旧城等待，
还没有评论，来说两句吧...